克隆节点，替换节点

Posted 2020-10-01 曹军

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了克隆节点，替换节点相关的知识，希望对你有一定的参考价值。

1.克隆节点介绍

2.替换节点

　　注意点：替换后的事件将不会存在

3.程序（克隆）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //事件
        $("li").click(function(){
            alert($(this).text());
        });
        //克隆节点
        $("#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>

    <p>你喜欢哪款单机游戏?</p>
    <ul id="game">
        <li id="rl">红警</li>
        <li>实况</li>
        <li>极品飞车</li>
        <li>魔兽</li>
    </ul>
</body>
</html>

4.程序（替换）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
 7 <script type="text/javascript">
 8     $(function(){
 9         //replaceAll
10         $("<li id=\'xa\'>西安</li>").replaceAll($("#city li:eq(2)"));
11         
12         //replaceWith
13         $("#city li:last").replaceWith("<li id=\'nj\'>南京</li>");
14     })
15 </script>
16 </head>
17 <body>
18     <p>你喜欢哪个城市?</p>
19     <ul id="city">
20         <li id="bj" name="BeiJing">北京</li>
21         <li>上海</li>
22         <li id="dj">东京</li>
23         <li id="se">首尔</li>
24     </ul>
25 </body>
26 </html>

5.程序（互换）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
 7 <script type="text/javascript">
 8     $(function(){
 9         alert(1);
10         var $bj2=$("#bj").clone(true);
11         var $rl=$("#rl").replaceWith($bj2);
12         $("#bj").replaceWith($rl);
13     })
14 </script>
15 </head>
16 <body>
17     <p>你喜欢哪个城市?</p>
18     <ul id="city">
19         <li id="bj" name="BeiJing">北京</li>
20         <li>上海</li>
21         <li id="dj">东京</li>
22         <li id="se">首尔</li>
23     </ul>
24 
25     <br>
26 
27     <p>你喜欢哪款单机游戏?</p>
28     <ul id="game">
29         <li id="rl">红警</li>
30         <li>实况</li>
31         <li>极品飞车</li>
32         <li>魔兽</li>
33     </ul>
34 </body>
35 </html>

以上是关于克隆节点，替换节点的主要内容，如果未能解决你的问题，请参考以下文章

jQuery-2.DOM---节点的复制与替换

jQuery 的节点操作

web前端练习26----Dom2,节点的创建添加，删除，替换，克隆，innerHTML，innerText，显示隐藏及练习

js操作节点的DOM方法

JavaScript课程——Day21（jQuery下class操作css操作元素宽高元素的位置滚动条创建.添加.替换.删除.克隆节点事件滑上事件的区别）