JavaScript 复制节点

■知识点

cloneNode()方法可以创建一个节点的副本。其用法如下:

    node.cloneNode(include all)

该方法将复制并返回调用它的节点的副本。如果参数为tme，将复制当前节点的所有子孙节点；否则，只复制当前节点。

■实例设计

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

var p = document.createElement ("p");            //创建节点

var pi = p.cloneNode(false);                              //复制节点

var info = "nodeName: " + p1.nodeName;      //获取复制节点的名称

info += ", nodeType: " + pl.nodeType;            //获取复制节点的类型

console.log(info);                                             //显示复制节点的名称和类型相同

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

var p = document.createElement("p");                //创建一个p元素

var hi = document.createElement("hi");              //创建一个h1元素

var txt = document.createTextNode("Hello World");   //创建一个文本节点

var hello = txt.cloneNode(false);                         //复制创建的文本节点

p.appendChild(txt);                                             //把复制的文本节点增加到段落节点中

hi.appendChild(p);                                              //把段落节点増加到标题节点中

document.body.appendChild(hi);                      //把标题节点增加到body节点中

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

var p = document.createElement("p");                //创建一个p元素

var h1 = document.createElement("hi");             //创建一个h1元素

var txt = document.createTextNode("Hello World");  //创建一个文本节点，文本内容为//“Hello World”

p.appendChild(txt);                                               //把文本节点增加到段落中

hi.appendChild(p);                                                 //把段落元素增加到标题元素中

document.body.appendChild(hi);                          //把标题元素增加到body元素中

var new_hl = hi.cloneNode(true);                          //复制标题元素及其所有子节点

document.body.appendChild (new__hl);               //把复制的新标题元素增加到文档中