JavaScript 復制節(jié)點

■知識點

cloneNode()方法可以創(chuàng)建一個節(jié)點的副本。其用法如下:

    node.cloneNode(include all)

該方法將復制并返回調用它的節(jié)點的副本。如果參數(shù)為tme，將復制當前節(jié)點的所有子孫節(jié)點；否則，只復制當前節(jié)點。

■實例設計

【示例1】在下面的示例中，首先創(chuàng)建一個節(jié)點p，然后復制該節(jié)點為pl，再利用nodeName和 nodeType屬性獲取復制節(jié)點的基本信息，該節(jié)點的信息與原來創(chuàng)建的節(jié)點基本信息相同。

var p = document.createElement ("p");            //創(chuàng)建節(jié)點

var pi = p.cloneNode(false);                              //復制節(jié)點

var info = "nodeName: " + p1.nodeName;      //獲取復制節(jié)點的名稱

info += ", nodeType: " + pl.nodeType;            //獲取復制節(jié)點的類型

console.log(info);                                             //顯示復制節(jié)點的名稱和類型相同

【示例2】以示例1為基礎，再創(chuàng)建一個文本節(jié)點之后，然后嘗試把復制的文本節(jié)點增加到段落元素中，再把段落元素增加到標題元素中，最后把標題元素增加到body元素中。如果此時調用復制文本節(jié)點的nodeName和nodeType屬性，則返回的nodeType屬性值為3，而nodeName屬性值為#text。

var p = document.createElement("p");                //創(chuàng)建一個p元素

var hi = document.createElement("hi");              //創(chuàng)建一個h1元素

var txt = document.createTextNode("Hello World");   //創(chuàng)建一個文本節(jié)點

var hello = txt.cloneNode(false);                         //復制創(chuàng)建的文本節(jié)點

p.appendChild(txt);                                             //把復制的文本節(jié)點增加到段落節(jié)點中

hi.appendChild(p);                                              //把段落節(jié)點増加到標題節(jié)點中

document.body.appendChild(hi);                      //把標題節(jié)點增加到body節(jié)點中

【示例3】下面的示例演示了如何復制一個節(jié)點及所有包含的子節(jié)點。當復制其中創(chuàng)建的標題1節(jié)點之后，該節(jié)點所包含的子節(jié)點及文本節(jié)點都將復制過來，然后增加到body元素的尾部。

var p = document.createElement("p");                //創(chuàng)建一個p元素

var h1 = document.createElement("hi");             //創(chuàng)建一個h1元素

var txt = document.createTextNode("Hello World");  //創(chuàng)建一個文本節(jié)點，文本內容為//“Hello World”

p.appendChild(txt);                                               //把文本節(jié)點增加到段落中

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

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

var new_hl = hi.cloneNode(true);                          //復制標題元素及其所有子節(jié)點

document.body.appendChild (new__hl);               //把復制的新標題元素增加到文檔中