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 相关文章推荐
js+xml生成级联下拉框代码
Jul 24 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
JS提交form表单实例分析
Dec 10 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
详解node.js 事件循环
Jul 22 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
轻松修复Discuz!数据库
2008/05/03 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
python dict如何定义
2020/09/02 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
2014年助理工程师工作总结
2014/11/14 职场文书