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简化Ajax开发 Ajax开发入门
Oct 14 Javascript
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
js利用拖放实现添加删除
Aug 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
生成静态页面的PHP类
2006/11/25 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
全球性的女装店:storets
2019/06/12 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
实习教师自我鉴定
2013/12/12 职场文书
哈理工毕业生的求职信
2013/12/22 职场文书
职工运动会感言
2014/02/07 职场文书
委托书如何写
2014/08/30 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
教师个人学习总结
2015/02/11 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
同乡会致辞
2015/07/30 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL