快捷導(dǎo)航

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

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

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

很多時(shí)候我們會(huì)用for 來(lái)生成多個(gè)結(jié)構(gòu)相同的節(jié)點(diǎn)結(jié)構(gòu)，這樣我們需要寫(xiě)很多createElement、setAttribute、appendChild 等代碼。

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

newElement oldElement.cloneNode(bool deep);

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

返回值就是一個(gè)克隆的節(jié)點(diǎn)newElement。

以下是測(cè)試代碼，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é)點(diǎn)對(duì)象 
for (var i = 1; i < 5; i++) { 
var clonedNode = sourceNode.cloneNode(true); // 克隆節(jié)點(diǎn) 
clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值，避免id 重復(fù) 
sourceNode.parentNode.appendChild(clonedNode); // 在父節(jié)點(diǎn)插入克隆的節(jié)點(diǎn) 
} 
} 

網(wǎng)頁(yè)加載的結(jié)果如下：