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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 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获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
如何开发一个JQuery插件
2016/07/28 面试题
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
王老吉广告词
2014/03/20 职场文书
市场督导岗位职责
2015/04/10 职场文书
民事上诉状范文
2015/05/22 职场文书
单位接收证明格式
2015/06/18 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
python脚本框架webpy模板控制结构
2021/11/20 Python