JS cloneNode()方法：复制节点

JavaScript cloneNode() 方法可以创建一个节点的副本，也即复制一个节点。

示例1

在下面示例中，首先创建一个节点 p，然后复制该节点为 p1，再利用 nodeName 和 nodeType 属性获取复制节点的基本信息，该节点的信息与原来创建的节点基本相同。

var p = document.createElement("p");  //创建节点
var p1 = p.cloneNode(false);  //复制节点
var info = "nodeName:" + p1.nodeName;  //获取复制节点的名称
info += ", nodeType:" + p1.nodeType;  //获取复制节点的类型
console.log(info);  //显示复制节点的名称和类型相同

示例2

以示例 1 为基础，在创建一个文本节点之后，尝试把复制的文本节点增加到段落元素之中，再把段落元素增加到标题元素中，最后把标题元素增加到 body 元素中。如果此时调用复制文本节点的 nodeName 和 nodeType 属性，则返回的 nodeType 属性值为 3，而 nodeName 属性值为 #text。

var p = document.createElement("p");  //创建一个p元素
var h1 = document.createElement("h1");  //创建一个h1元素
var txt = document.createTextNode("Hello World");  //创建一个文本节点
var hello = txt.cloneNode(false);  //复制创建的文本节点
p.appendChild(txt);  //把复制的文本节点增加到段落节点中
h1.appendChid(p);  //把段落节点增加到标题节点中
document.body.appendChild(h1);  //把标题节点增加到body节点中

示例3

下面示例演示了如何复制一个节点及所有包含的子节点。当复制其中创建的标题 1 节点之后，该节点所包含的子节点及文本节点豆浆杯复制过来，然后增加到 body 元素的尾部。

var p = document.createElement("p");  //创建一个p元素
var h1 = document.createElement("h1");  //创建一个h1元素
var txt = document.createTextNode("Hello World");  //创建一个文本节点
p.appendChild(txt);  //把复制的文本节点增加到段落节点中
h1.appendChid(p);  //把段落节点增加到标题节点中
document.body.appendChild(h1);  //把标题节点增加到body节点中
var new_h1 = h1.cloneNode(true);  //复制标题元素及其所有子节点
document.body.appendChild(new_h1);  //把复制的新标题元素增加到文档中

由于复制的节点会包含原节点的所有特性，如果节点中包含 id 属性，就会出现 id 属性值重叠的情况。一般情况下，在同一个文档中，不同属性的 id 属性值应该不同。为了避免潜在冲突，应修改其中某个节点的 id 属性值。