注册登录

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

时间:2016-02-12 13:18 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【JavaScript 用cloneNode方法克隆节点的代码】，下面是详细的讲解！

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

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

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

newElement oldElement.cloneNode(bool deep);

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

返回值就是一个克隆的节点newElement。

以下是测试代码，test.htm 和test.js 文件。

复制代码代码如下:

<html>
<head>
<title>Test of cloneNode Method</title>
<script type="text/javascript" src="http://www.jb51.net/article/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); // 在父节点插入克隆的节点
}
}

网页加载的结果如下：

用Google Chrome 的开发人员工具可以看出，div-0 的节点结构都被复制了。

而当把cloneNode 的deep 参数设为false 的时候，仅仅div-0 这个节点本身被克隆，而他的子节点（即其内容）是没有被复制的。

复制代码代码如下:

var clonedNode=sourceNode.cloneNode(false);

关于JavaScript 用cloneNode方法克隆节点的代码的用户互动如下：

　　相关问题：JavaScript复制节点克隆求代码不懂怎么复制

　　答：都没说清楚具体是干嘛的。。试试createElement然后遍历要复制的所有属性然后appendChild？ >>详细

　　相关问题：js cloneNode 的克隆节点怎么删除对应节点？

　　答： Test of cloneNode Method Cloud018 said, "Hello World!!!" // test.js window.onload = function () { var sourceNode = document.getElementById("div-0"); // 获得被克隆的节点对象 for (var i = 1; i < 5; i++) { var clonedNode = source... >>详细

　　相关问题：js怎么复制一个节点并追加

　　答：node 是你要复制的那么var cNode = node.cloneNode(true)就把这个节点克隆了,并赋值给变量cNode 想把这个节点追加到某个元素内, 我假设元素为element 那么element.appendChild(cNode)就可以了 >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

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

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

关于JavaScript 用cloneNode方法克隆节点的代码的用户互动如下：

第一章 JavaScript （基础）

第二章 JavaScript（高级）