jQuery基础修炼圣典—DOM篇-优快云博客

本文介绍了DOM操作中的节点复制与替换方法，包括clone()用于克隆节点及其事件，replaceWith()和replaceAll()用于替换节点。并通过实例展示了如何使用这些方法来修改网页结构。

2019独角兽企业重金招聘Python工程师标准>>>

5.DOM节点的复制与替换

（1）DOM拷贝clone()

clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了

HTML部分
<div></div>

JavaScript部分
$("div").on('click', function() {//执行操作})

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

（2）DOM替换replaceWith()和replaceAll()

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>

替换第二段的节点与内容

$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')

通过jQuery筛选出第二个p元素，调用replaceWith进行替换，结果如下

<div>
    <p>第一段</p>
    <a style="color:red">替换第二段的内容</a>'
    <p>第三段</p>
</div>

.replaceAll( target ) ：用集合的匹配元素替换每个目标元素

$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')

转载于:https://my.oschina.net/huangsuhong/blog/675210