JavaScript 用cloneNode方法克隆节点的代码

133 阅读 0 评论 88 点赞

我是靠谱客的博主任性外套，最近开发中收集的这篇文章主要介绍JavaScript 用cloneNode方法克隆节点的代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

很多时候我们会用for 来生成多个结构相同的节点结构，这样我们需要写很多createElement、setAttribute、appendChild 等代码。

但其实我们只需要有一个html 的模板，就可以用cloneNode 方法对已有的节点进行克隆，包括其子节点。
以下是cloneNode 方法原型：

newElement oldElement.cloneNode(bool deep);

这个方法只有一个参数deep，布尔值，如果为true，则克隆oldElement 这个及其子节点，否则只可能这个节点本身。

返回值就是一个克隆的节点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"); // 获得被克隆的节点对象 
for (var i = 1; i < 5; i++) { 
var clonedNode = sourceNode.cloneNode(true); // 克隆节点 
clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值，避免id 重复 
sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点 
} 
} 

网页加载的结果如下：