首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 17:49:00
原創
1722 人瀏覽過

很多時候我們會用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); // 在父節點插入克隆的節點
}
}

網頁載入的結果如下:

JavaScript 用cloneNode方法複製節點的程式碼_javascript技巧用Google Chrome的開發人員工具可以看出,div-0 的節點結構都被複製了。

JavaScript 用cloneNode方法複製節點的程式碼_javascript技巧而當把cloneNode 的deep 參數設為false 的時候,僅僅div-0 這個節點本身被克隆,而他的子節點(即其內容)是沒有被複製的。


複製程式碼 程式碼如下:
var clonedNode = sourceNode.cloneNode. >

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!