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入门必备的基本认识及实例(整理)
Jun 24 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 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/12/04 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
linux下安装easy_install的方法
2013/02/10 Python
深入浅析python定时杀进程
2016/06/06 Python
Python hashlib模块实例使用详解
2019/12/24 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
司机岗位职责
2013/11/15 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
中学社团活动总结
2015/05/07 职场文书
李强优秀员工观后感
2015/06/16 职场文书
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技