JavaScript 用cloneNode方法克隆节点的代码
更新时间：2012年10月15日 17:20:16 作者：
很多时候我们需要通过HTML DOM 的方式，用JavaScript 动态生成很多相同的节点，包括其子节点
很多时候我们会用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); // 在父节点插入克隆的节点
}
}
网页加载的结果如下：
用Google Chrome 的开发人员工具可以看出，div-0 的节点结构都被复制了。
而当把cloneNode 的deep 参数设为false 的时候，仅仅div-0 这个节点本身被克隆，而他的子节点（即其内容）是没有被复制的。
复制代码 代码如下:
var clonedNode = sourceNode.cloneNode(false);
相关文章
下面小编就为大家带来一篇15位和18位身份证JS校验的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了JavaScript实现添加及删除事件的方法,实例总结了javascript对事件的添加及删除的技巧,涉及javascript事件绑定的方法及浏览器兼容的相关注意事项,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了javascript+css3 实现动态按钮菜单特效的相关资料,需要的朋友可以参考下2016-02-02
这篇文章主要为大家详细介绍了ionic3双击返回退出应用的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
在现代系统中,Token认证已成为保障用户安全的标准做法,然而,尽管许多系统采用了这种认证方式,却在处理Token刷新方面存在不足,导致用户体验不佳,许多系统未能提供一种无缝的、用户无感知的Token刷新机制,所以本文介绍了教你用Axios实现无感知双Token刷新2024-08-08
在追求高效办公的今天,一个触手可及的桌面备忘录能极大地提升生产力,本文将深度解析如何利用 Electron 技术栈,构建一个支持无边框透明、实时搜索、一键换肤且数据持久化的桌面小工具,需要的朋友可以参考下2026-01-01
当下最流行的前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢，你如果也喜欢Bootstrap前端开发框架，不要错过这次旅行2016-05-05
一个多次搜索+多次传值的解决方案...2007-01-01
浏览器的各种菜单命令比如打印、查看源文件、加入收藏等等，这些在js中时完全可以实现的，本文搜集整理了一些，感兴趣的朋友可以参考下2013-10-10
此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.这篇文章主要介绍了Bootstrap风格的WPF样式的相关资料，需要的朋友参考下2016-12-12
最新评论