JavaScript 用cloneNode方法克隆節(jié)點的代碼

更新時間：2012年10月15日 17:20:16 作者：

很多時候我們需要通過HTML DOM 的方式，用JavaScript 動態(tài)生成很多相同的節(jié)點，包括其子節(jié)點

很多時候我們會用for 來生成多個結構相同的節(jié)點結構，這樣我們需要寫很多createElement、setAttribute、appendChild 等代碼。

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

newElement oldElement.cloneNode(bool deep);

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

返回值就是一個克隆的節(jié)點newElement。

以下是測試代碼，test.htm 和test.js 文件。

復制代碼代碼如下:

 
<!-- 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

復制代碼代碼如下:

 
// 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 重復 
sourceNode.parentNode.appendChild(clonedNode); // 在父節(jié)點插入克隆的節(jié)點 
} 
} 

網(wǎng)頁加載的結果如下：