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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 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
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
javascript 函数调用规则
2009/08/26 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
vuex实现简易计数器
2016/10/27 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
python操作mysql数据库
2017/03/05 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
公司董事长职责
2013/12/12 职场文书
护理实习自我鉴定
2013/12/14 职场文书
品质主管岗位职责
2014/03/16 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers