复制节点（cloneNode）

DOM提供用来复制节点方法。

cloneNode()：将为给定节点创建一个副本，这个方法的返回值是一个指向新建克隆节点的引用指针，

reference = node.cloneNode(deep)

这个方法只是有一个布尔类型的参数，它的可取值只能是true和false，这个参数决定着是否要把复制节点的子节点也一同复制到新建节点里面去，如果这个参数值是true，新节点包含着被复制完全一样的子节点。如果这个参数值是false，新节点将不包括任何子节点---，如果被复制节点是一个元素节点，着意味着包含在被复制节点里的所有文本将不会被复制，但是属性节点会被复制：

reference = node.cloneNode(true);
reference = node.cloneNode(false);

cloneNode()方法所返回的引用指针指向一个节点对象。新节点有着与被复制节点完全一样的nodeType()和nodeName的属性值：

var para = document.createElement("p");
var newpara = para.cloneNode(false);

在这个例子中先创建新的元素节点para，然后通过复制para元素节点有创建一个新的元素节点newpara，para.nodeType返回值将是1，newpara.nodeType返回的值也将是1。

再来看一个例子：

var message = document.createElement("hello world");
var newmessage = meaage.cloneNode(false);

在此例子中，我们先创建了一个新的文本节点message，然后通过复制message文本节点又创建了一个新的文本节点newmessage。message.nodeType/返回值将是3，

在下面的例子中，给定节点和它的子节点都被复制到新的节点里面：

var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
var newpara = para.cloneNode(true);

 因为在发出para.cloneNode()调用时候传递的参数是true，所以新创建的元素节点newpara也将有一个包含着文本“hello word”的子文本节点。

下面这段代码在复制节点时没有把子节点包括进来：

var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
var newpara = para.cloneNode(false);

与被复制的para节点一样，新节点newpara也是一个元素节点。para节点还有一个包含着文本“hello world”的自文本节点，但newpara节点没有任何自节点。

用cloneNode()方法复制出来的新节点不会被自动添加到文档里面，新节点没有nodeParent属性。如果想把新节点添加到你的文档里，则需要使用appendChild()或insertBefore()方法或者replaceChild()方法。

var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChile(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);
document.body.appendChild(newpara);

在此例子中，第一条语句创建了一个para文本段元素，第二条语句创建了一个message文本节点，第三条语句把message文本节点插入para元素节点，第四条语句把para插入文档body元素，接下来，第五条语句调用cloneNode()方法从para节点复制出了一个新的元素节点newpara，第六条语句把newpara插入文档的body元素，最后两个相同的文本段被插入了文档。

请注意：如果被复制元素有一个独一无二的id属性，千万不要忘记对复制出来的新元素的id属性进行修改，在同一个文档里面，不同元素的id属性值必须各不相同。

转载于:https://www.cnblogs.com/zzq919101/p/6014815.html