JavaScript 用cloneNode方法複製節點的程式碼_javascript技巧

很多時候我們會用for 來產生多個結構相同的節點結構，這樣我們需要寫很多createElement、setAttribute、appendChild 等程式碼。

但其實我們只需要有一個html 的模板，就可以用cloneNode 方法對現有的節點進行克隆，包括其子節點。
以下是cloneNode 方法原型：

newElement oldElement.cloneNode(bool deep);

這個方法只有一個參數deep，布林值，如果為true，則克隆oldElement 這個及其子節點，否則只可能這個節點本身。

回傳值就是一個複製的節點newElement。

以下是測試程式碼，test.htm 和test.js 檔案。

複製代碼 代碼如下:

Cloud018 said,
"Hello World!!!"

Code

複製程式碼 程式碼如下:

// test.js; .onload = function () {
var sourceNode = document.getElementById("div-0"); // 取得被複製的節點物件
for (var i = 1; i var clonedNode = sourceNode.cloneNode(true); // 複製節點
clonedNode.setAttribute("id", "div-" i); // 修改一下id 值，避免id 重複
sourceNode.parentNode .appendChild(clonedNode); // 在父節點插入克隆的節點
}
}

網頁載入的結果如下：

用Google Chrome的開發人員工具可以看出，div-0 的節點結構都被複製了。

而當把cloneNode 的deep 參數設為false 的時候，僅僅div-0 這個節點本身被克隆，而他的子節點（即其內容）是沒有被複製的。

複製程式碼 程式碼如下:

var clonedNode = sourceNode.cloneNode. >