编程 Javascript

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程序设计有所帮助。

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

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery的一些注意

Dec 06 Javascript

javascript一个无懈可击的实例化XMLHttpRequest的方法

Oct 13 Javascript

Node.js入门教程：在windows和Linux上安装配置Node.js图文教程

Aug 14 Javascript

JS中的form.submit()不能提交表单的错误原因

Oct 08 Javascript

利用VUE框架，实现列表分页功能示例代码

Jan 12 Javascript

JavaScript实现256色转灰度图

Feb 22 Javascript

JavaScript递归算法生成树形菜单

Aug 15 Javascript

JavaScript之创意时钟项目(实例讲解)

Oct 23 Javascript

VUE element-ui 写个复用Table组件的示例代码

Nov 18 Javascript

JS函数节流和函数防抖问题分析

Dec 18 Javascript

详解微信小程序审核不通过的解决方法

Jan 17 Javascript

vue如何实现自定义底部菜单栏

Jul 01 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