DOM节点的复制与替换

clone()

detach是剪切的话，clone就是复制了

clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了。

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

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

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

元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。意思是不会copy元素数据和数组（主要是内存上），所有copy的元素都共享一个，如果改变其中一个的，就等于改变了所有的。

replaceWith()和replaceAll()

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

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

• .replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别
• .replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
• html()只是把所匹配到的节点里的内容给替换掉，而replaceWith()是把匹配到的这节点替换掉

wrap()包裹

将元素用其他元素包裹起来，也就是给它增加一个父元素。

$(‘p‘).wrap(‘<div></div>‘)
//等同于
$(‘p‘).wrap(function() {
    return ‘<div></div>‘;
})

得到：

<div>
    <p>p元素</p>
</div>

unwrap()

将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。例如：

<div>
    <p>p元素</p>
</div>

删除这段代码中的div，一般常规的方法会直接通过remove或者empty方法,但是如果要保留内部元素p，使用：
$(‘p‘).unwarp()
找到p元素，然后调用unwarp方法，这样只会删除父辈div元素了。

wrapAll()

wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素

<p>p元素</p>
<p>p元素</p>
$(‘p‘).wrapAll(‘<div></div>‘)

得到：

<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

如果是用$(‘p‘).wrap(‘

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

wrapInner()

给集合中匹配的元素的内部，增加包裹的HTML结构.

<div>p元素</div>
<div>p元素</div>
$(‘div‘).wrapInner(‘<p></p>‘)

得到：

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

DOM节点的复制与替换

原文：https://www.cnblogs.com/zhaozihan/p/7295310.html