DOM节点深度克隆函数cloneNode()用法实例

更新时间：2015年01月12日 11:11:10 投稿：shichen2014

这篇文章主要介绍了DOM节点深度克隆函数cloneNode()用法,实例分析了cloneNode()函数深度复制的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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函数中with
这篇文章主要介绍了javascript函数中with,with函数方便用来引用某个对象中已有的属性，但是不能用来给对象添加属性，要给对象创建新的属性，下面通过代码给大家讲解，需要的朋友可以参考下
2018-10-10
event对象获取方法总结在google浏览器下测试
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，Event对象的获取方法如下，感兴趣的朋友可以参考下
2013-11-11
移动端界面的适配
本文主要介绍了移动端页面适配相关知识，用于解决在所有手机上看到字体的大小都一样问题。下面跟着小编一起来看下吧
2017-01-01
JavaScript通过join函数连接数组里所有元素的方法
这篇文章主要介绍了JavaScript通过join函数连接数组里所有元素的方法,实例分析了javascript中join函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
JavaScript引用赋值与传值赋值总结
这篇文章主要介绍了JavaScript引用赋值与传值赋值总结，在JavaScript中基本数据类型都是传值赋值，复合数据类型都是引用赋值(传地址)也叫引用传址，下文更多相关资料，需要的小伙伴可以参考一下
2022-05-05
JS实现简易刻度时钟示例代码
本篇文章主要介绍了JS实现简易刻度时钟示例代码的资料,这里整理了详细的代码,有需要的小伙伴可以参考下。
2017-03-03
十分钟教你上手ES2020新特性
这篇文章主要介绍了十分钟教你上手ES2020新特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
JavaScript 特有方法计算二进制中1的个数 split方法
这是一道网上看到的前端的笔试题，主要思想是利用JavaScript的toString方法将十进制数转换为二进制的字符串。然后for循环遍历计算字符串中”1″出现的次数。
2010-05-05
JavaScript判断对象是否为空对象的几种常见方法
经典面试题,研发时也经常遇见的一个问题,如何判断一个对象是空对象,这篇文章主要给大家介绍了关于JavaScript判断对象是否为空对象的几种常见方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
js遍历对象key和value实战举例
这篇文章主要给大家介绍了关于js遍历对象key和value的相关资料,随着JavaScript在web应用程序中的广泛使用,遍历对象的key和value成为了编写复杂代码所必需的技能,需要的朋友可以参考下
2023-07-07