DOM节点深度克隆函数cloneNode()用法实例


Posted in Javascript onJanuary 12, 2015

本文实例讲述了DOM节点深度克隆函数cloneNode()用法。分享给大家供大家参考。

具体实现方法如下:

<html>

<head>

<script type="text/javascript">

function t(){ 

 var nodeul = document.getElementsByTagName('ul')[0];//获取需要复制的UL节点

 var newul = nodeul.cloneNode(true);//true表示深度复制,即边下边的li和文本也一起;如果是false,则只复制ul

 

 var node_copy = document.getElementById('copyul');

 node_copy.appendChild(newul);

}

</script>

</head>

<body>

<div id="container">

 <ul>

  <li>春天</li>

  <li>夏天</li>

  <li>秋天</li>

  <li>冬天</li>

 </ul>

</div>

<div id="copyul">

</div>

<hr />

<button onclick="t()" value="">指定位置增加节点</button>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JQuery 动态扩展对象之另类视角
May 25 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 #Javascript
原生javascript实现图片弹窗交互效果
Jan 12 #Javascript
原生javascript实现图片按钮切换
Jan 12 #Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 #Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 #Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 #Javascript
推荐4个原生javascript常用的函数
Jan 12 #Javascript
You might like
关于PHP的curl开启问题探讨
2014/04/08 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
python xpath获取页面注释的方法
2019/01/14 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
药店促销活动策划方案
2014/08/24 职场文书
快递员岗位职责
2014/09/12 职场文书
面试自我评价范文
2014/09/17 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
党纪处分决定书
2015/06/24 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
JS setTimeout与setInterval的区别
2022/04/20 Javascript
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技