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 屬性值。