Jquery中的DOM操作 (四.复制和替换节点)

最新推荐文章于 2022-07-12 21:07:45 发布

张大仙是个妖怪

最新推荐文章于 2022-07-12 21:07:45 发布

阅读量465

点赞数 1

分类专栏： # jQuery选择器和DOM操作文章标签： jQuery 操作DOM节点

本文链接：https://blog.csdn.net/NDKHBWH/article/details/59580980

版权

jQuery选择器和DOM操作专栏收录该内容

26 篇文章 0 订阅

订阅专栏


 $(function(){
        //5.复制节点
                //1.clone()方法中传递参数true,它的含义是复制元素的同时复制元素所绑定的事件,否则不会复制事件
                        //不会复制事件
                        $("ul li").click(function(){
                                $(this).clone().appendTo("ul");
                        });
                          //会复制事件
                        $("div li").click(function(){
                                      $(this).clone(true).appendTo("div");
                         });
            //5.替换节点
                //replaceWith()和replaceAll()
                //如果替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被绑定的元素
                //一起消失,需要在新元素上重新绑定事件
                            $("#one").replaceWith("<p><strong>你喜欢的是?</strong></p>");
                            $("<strong>你喜欢的是?</strong>").replaceAll("#two");
        });

<body>
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<p id="one" title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<p id="two"   title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<ul>
    <li>西瓜</li>
    <li title="pt">葡萄</li>
    <li>香瓜</li>
</ul>

<div id="1">
    <li>苹果1</li>
    <li>菠萝1</li>
    <li>橘子1</li>
</div>

</body>