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 相关文章推荐
javaScript call 函数的用法说明
Apr 09 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
微信小程序实现底部导航
Nov 05 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
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
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
详解python tkinter模块安装过程
2020/01/06 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
美国电视购物:QVC
2017/02/06 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
好邻里事迹材料
2014/01/16 职场文书
《童趣》教学反思
2014/02/19 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Python实现仓库管理系统
2022/05/30 Python
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS