很多時候我們會用for 來產生多個結構相同的節點結構,這樣我們需要寫很多createElement、setAttribute、appendChild 等程式碼。
但其實我們只需要有一個html 的模板,就可以用cloneNode 方法對現有的節點進行克隆,包括其子節點。
以下是cloneNode 方法原型:
newElement oldElement.cloneNode(bool deep);
這個方法只有一個參數deep,布林值,如果為true,則克隆oldElement 這個及其子節點,否則只可能這個節點本身。
回傳值就是一個複製的節點newElement。
以下是測試程式碼,test.htm 和test.js 檔案。
Test of cloneNode Method
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. >