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


Posted in Javascript onOctober 15, 2012

很多时候我们会用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); // 在父节点插入克隆的节点 
} 
}

网页加载的结果如下:
JavaScript 用cloneNode方法克隆节点的代码
用Google Chrome 的开发人员工具可以看出,div-0 的节点结构都被复制了。
JavaScript 用cloneNode方法克隆节点的代码
而当把cloneNode 的deep 参数设为false 的时候,仅仅div-0 这个节点本身被克隆,而他的子节点(即其内容)是没有被复制的。
var clonedNode = sourceNode.cloneNode(false);

JavaScript 用cloneNode方法克隆节点的代码
Javascript 相关文章推荐
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 #Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 #Javascript
JS自动缩小超出大小的图片
Oct 12 #Javascript
文本框input聚焦失焦样式实现代码
Oct 12 #Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 #Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 #Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 #Javascript
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
Vue.use源码学习小结
2018/06/20 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
python将ip地址转换成整数的方法
2015/03/17 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
python绘制玫瑰的实现代码
2020/03/02 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
历史教育专业个人求职信
2013/12/13 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
植树造林的宣传标语
2014/06/23 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
工地食品安全责任书
2015/05/09 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android