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 相关文章推荐
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
vue实现弹幕功能
Oct 25 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
详解CocosCreator消息分发机制
Apr 16 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
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
splice slice区别
2006/10/09 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
JS hashMap实例详解
2016/05/26 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
python脚本替换指定行实现步骤
2017/07/11 Python
python的socket编程入门
2018/01/29 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
python实现的分层随机抽样案例
2020/02/25 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
python eventlet绿化和patch原理
2020/11/21 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
历史专业毕业生的自我鉴定
2013/11/15 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android
vue实现列表垂直无缝滚动
2022/04/08 Vue.js