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两段代码,两个小技巧
Feb 04 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
ES6 十大特性简介
Dec 09 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
浅析is_writable的php实现
2013/06/18 PHP
php函数连续调用实例分析
2015/07/30 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
子页向父页传值示例
2013/11/27 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
python编写的最短路径算法
2015/03/25 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
Python3 处理JSON的实例详解
2017/10/29 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
小区门卫工作职责
2013/12/14 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
顶碗少年教学反思
2014/02/21 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android