DOM——拷贝.clone()与替换.replaceWith() 和.replaceAll()及包裹.wrap()

Posted 2020-10-15

      拷贝.clone()与替换.replaceWith() 和.replaceAll()及包裹.wrap()

1   .clone()深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素和文字节点

2   如果节点有事件或者数据之类的其他处理，需要通过clone（ture)传递一个布尔值ture来指定，不仅克隆单纯的节点结构，还把附带的事件与数据一并克隆了

3   使用clone()时，再将它插入到当前文档之前，可以修改克隆后的元素或者元素内容

4   通过传递true将所有绑定在原始元素上的事件处理函数复制到克隆元素上

5   .clone()是JQuery扩展的，只能处理通过JQuery绑定的事件与数据

6   元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享，如果深度复制所有数据，需要手动一一复制

7   .replaceWith(newContent)用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合，即用$()选择节点A，调用replaceWith方法，传入一个新的内容B（html字符串、DOM元素或者JQuery对象）用来替换选中的节点A

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

9   .replaceWith()返回的JQuery对象引用的是替换前的节点，而不是通过.replaceWith() 或者.replaceAll()方法替换后的节点，还可以和其他方法链接使用

10   .replaceWith() 和.replaceAll()功能类似，会删除与节点相关联的所有数据和事件处理程序

11    .replaceWith() 和.replaceAll()目标和源的位置相反

12   .wrap(wrappingElement)在集合中匹配的每个元素周围包裹一个HTML结构

13   .wrap(function)一个回调函数，返回用于包裹匹配元素的HTML内容或JQuery对象

14   使用后的效果与直接传递参数是一样，可以把代码写在函数体内部，写法不同

15   .wrap()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构，这种结构可以嵌套好几层，但只包含一个核心的元素，每个匹配的元素都会被这种结构包裹，该方法返回原始的元素集，以便之后使用链式方法