JavaScript 用cloneNode方法克隆節(jié)點的代碼
更新時間：2012年10月15日 17:20:16 作者：
很多時候我們需要通過HTML DOM 的方式，用JavaScript 動態(tài)生成很多相同的節(jié)點，包括其子節(jié)點
很多時候我們會用for 來生成多個結(jié)構(gòu)相同的節(jié)點結(jié)構(gòu)，這樣我們需要寫很多createElement、setAttribute、appendChild 等代碼。
但其實我們只需要有一個html 的模板，就可以用cloneNode 方法對已有的節(jié)點進(jìn)行克隆，包括其子節(jié)點。
以下是cloneNode 方法原型：
newElement oldElement.cloneNode(bool deep);
這個方法只有一個參數(shù)deep，布爾值，如果為true，則克隆oldElement 這個及其子節(jié)點，否則只可能這個節(jié)點本身。
返回值就是一個克隆的節(jié)點newElement。
以下是測試代碼，test.htm 和test.js 文件。
復(fù)制代碼 代碼如下:
<!-- test.htm -->
<html>
<head>
<title>Test of cloneNode Method</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="main">
<div id="div-0">
<span>Cloud018 said, </span>
<span>"Hello World!!!"</span>
</div>
</div>
</body>
</html>
Code
復(fù)制代碼 代碼如下:
// test.js
window.onload = function () {
var sourceNode = document.getElementById("div-0"); // 獲得被克隆的節(jié)點對象
for (var i = 1; i < 5; i++) {
var clonedNode = sourceNode.cloneNode(true); // 克隆節(jié)點
clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值，避免id 重復(fù)
sourceNode.parentNode.appendChild(clonedNode); // 在父節(jié)點插入克隆的節(jié)點
}
}
網(wǎng)頁加載的結(jié)果如下：
用Google Chrome 的開發(fā)人員工具可以看出，div-0 的節(jié)點結(jié)構(gòu)都被復(fù)制了。
而當(dāng)把cloneNode 的deep 參數(shù)設(shè)為false 的時候，僅僅div-0 這個節(jié)點本身被克隆，而他的子節(jié)點（即其內(nèi)容）是沒有被復(fù)制的。
復(fù)制代碼 代碼如下:
var clonedNode = sourceNode.cloneNode(false);
相關(guān)文章
下面小編就為大家?guī)硪黄?5位和18位身份證JS校驗的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
JavaScript實現(xiàn)添加及刪除事件的方法小結(jié)
這篇文章主要介紹了JavaScript實現(xiàn)添加及刪除事件的方法,實例總結(jié)了javascript對事件的添加及刪除的技巧,涉及javascript事件綁定的方法及瀏覽器兼容的相關(guān)注意事項,需要的朋友可以參考下2015-08-08
javascript+css3 實現(xiàn)動態(tài)按鈕菜單特效
這篇文章主要介紹了javascript+css3 實現(xiàn)動態(tài)按鈕菜單特效的相關(guān)資料,需要的朋友可以參考下2016-02-02
這篇文章主要為大家詳細(xì)介紹了ionic3雙擊返回退出應(yīng)用的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
利用Axios實現(xiàn)無感知雙Token刷新的詳細(xì)教程
在現(xiàn)代系統(tǒng)中,Token認(rèn)證已成為保障用戶安全的標(biāo)準(zhǔn)做法,然而,盡管許多系統(tǒng)采用了這種認(rèn)證方式,卻在處理Token刷新方面存在不足,導(dǎo)致用戶體驗不佳,許多系統(tǒng)未能提供一種無縫的、用戶無感知的Token刷新機(jī)制,所以本文介紹了教你用Axios實現(xiàn)無感知雙Token刷新2024-08-08
當(dāng)下最流行的前端開發(fā)框架Bootstrap，可大大簡化網(wǎng)站開發(fā)過程，從而深受廣大開發(fā)者的喜歡，你如果也喜歡Bootstrap前端開發(fā)框架，不要錯過這次旅行
2016-05-05 
一個多次搜索+多次傳值的解決方案...
2007-01-01 
js實現(xiàn)瀏覽器的各種菜單命令比如打印、查看源文件等等
瀏覽器的各種菜單命令比如打印、查看源文件、加入收藏等等，這些在js中時完全可以實現(xiàn)的，本文搜集整理了一些，感興趣的朋友可以參考下
2013-10-10 
此樣式基于bootstrap-3.3.0,樣式文件里的源碼行數(shù)都是指的這個版本.這篇文章主要介紹了Bootstrap風(fēng)格的WPF樣式的相關(guān)資料，需要的朋友參考下
2016-12-12