jQuery_克隆和替换节点

17-01-09 来源：[db:作者]

收藏我要投稿

•clone():克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.

•clone(true):复制元素的同时也复制元素中的的事件

•replaceWith(): 将所有匹配的元素都替换为指定的HTML 或DOM 元素

•replaceAll(): 颠倒了的replaceWith()方法.

•注意:若在替换之前,已经在元素上绑定了事件,替换后原先绑定的事件会与原先的元素一起消失

<!DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>Untitled Document</title>  
          
        <script type="text/javascript" src="./js/jquery-1.7.2.js"></script>  
        <script type="text/javascript">  
              
            //测试使用 jQuery clone 方法: 复制节点  
            $(function(){  
                  
                $("li").click(function(){  
                    alert($(this).text());  
                });  
                  
                //复制 #bj 节点, 并添加到 #rl 节点的后面  
                /*  
                1. clone 节点时需要注意克隆后的节点的 id 属性. 若原节点有 id  
                属性, 则克隆后, 会出现在一个文档中有两个 id 相同的节点的情况.  
                2. clone(true): 在克隆节点的同时, 克隆节点包含的事件.   
                */  
                $("#bj").clone(true)  
                        .attr("id", "bj2")  
                        .insertAfter($("#rl"));  
                  
            })  
              
        </script>  
          
    </head>  
    <body>  
        <p>你喜欢哪个城市?</p>  
        <ul id="city">  
            <li id="bj" name="BeiJing">北京</li>  
            <li>上海</li>  
            <li id="dj">东京</li>  
            <li id="se">首尔</li>  
        </ul>  
          
        <br><br>  
        <p>你喜欢哪款单机游戏?</p>  
        <ul id="game">  
            <li id="rl">红警</li>  
            <li>实况</li>  
            <li>极品飞车</li>  
            <li>魔兽</li>  
        </ul>  
          
        <br><br>  
        gender:   
            <input type="radio" name="gender" value="male"/>Male  
            <input type="radio" name="gender" value="female"/>Female  
      
        <br><br>  
        name: <input type="text" name="username" value="hello"/>  
          
    </body>  
</html>

<!DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>Untitled Document</title>  
          
        <script type="text/javascript" src="./js/jquery-1.7.2.js"></script>  
        <script type="text/javascript">  
              
            //测试使用 jQuery replaceWith (replaceAll) 方法: 替换节点  
            /*  
            1. replaceWith , replaceAll 一对方法, 可以完成一件事. 就是主语宾语  
            哪个在前面的问题.   
            2. 以上的两个方法还有移动节点的功能  
            3. 节点互换需要先克隆节点.   
            4. $("#rl").replaceWith($bj2) 返回的是被替换的节点。  
            var $rl = $("#rl").replaceWith($bj2);  
            */  
            $(function(){  
                  
                //1. 创建一个 <li>杭州</li> 节点, 替换 #city 的最后一个 li 子节点  
                $("<li>杭州</li>").replaceAll($("#city li:last"));  
                  
                //2. 创建一个 <li>[杭州]</li> 节点,   
                //替换 #city 的第二个 li 子节点  
                $("#city li:eq(1)").replaceWith($("<li>[杭州]</li>"));  
                  
              
                //3. 互换以下两个节点: #rl 和 #bj. 还有移动的功能.  
                //$("#bj").replaceWith($("#rl"));  
                  
                //节点互换需要先克隆节点.   
                alert(1);  
                var $bj2 = $("#bj").clone(true);  
                var $rl = $("#rl").replaceWith($bj2);  
                  
                alert(2);  
                $("#bj").replaceWith($rl);  
            })  
              
          
        </script>  
          
    </head>  
    <body>  
        <p>你喜欢哪个城市?</p>  
        <ul id="city">  
            <li id="bj" name="BeiJing">北京</li>  
            <li>上海</li>  
            <li id="dj">东京</li>  
            <li id="se">首尔</li>  
        </ul>  
          
        <br><br>  
        <p>你喜欢哪款单机游戏?</p>  
        <ul id="game">  
            <li id="rl">红警</li>  
            <li>实况</li>  
            <li>极品飞车</li>  
            <li>魔兽</li>  
        </ul>  
          
        <br><br>  
        gender:   
            <input type="radio" name="gender" value="male"/>Male  
            <input type="radio" name="gender" value="female"/>Female  
      
        <br><br>  
        name: <input type="text" name="username" value="hello"/>  
          
    </body>  
</html>

点击复制链接与好友分享!回本站首页