DOM节点深度克隆函数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程序设计有所帮助。

赞 (0)

相关推荐

  • DOM节点删除函数removeChild()用法实例

    本文实例讲述了DOM节点删除函数removeChild()用法.分享给大家供大家参考.具体分析如下: DOM删除一个节点,必须要站在父节点的高度去删除,代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  //思路:1.首先找到要删除的节点:2. 找到它的父节点,在父节点的角度删除子节点  var nodeul = document.getEleme

  • js中使用DOM复制（克隆）指定节点名数据到新的XML文件中的代码

    复制代码 代码如下: <?php /* <?xml version="1.0" encoding="utf-8"?> <article> <item> <title name="t1"></title> <content>content1</content> <pubdate>2009-10-11</pubdate> </ite

  • DOM节点的替换或修改函数replaceChild()用法实例

    本文实例讲述了DOM节点的替换或修改函数replaceChild()用法.分享给大家供大家参考.具体分析如下: DOM节点的替换过程: (1)创建新的节点: (2)找到旧的节点: (3)站在父节点的角度,使用replaceChild(新,旧)函数来替换. 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  //思路:1.首先找到要替换的节点:2. 创建一个新的

  • jQuery的DOM操作之删除节点示例

    jQuery的DOM操作之删除节点示例

    如果文档中某一个元素多余,那么应将其删除.jQuery提供了两种删除节点的方法,remove()方法和empty()方法. 1. remove(): <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content=&quo

  • javascript 获取HTML DOM父、子、临近节点

    在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i

  • JS构建页面的DOM节点结构的实现代码

    JS构建页面的DOM节点结构的实现代码

    小提示: 关于数组的concat和push方法. 两者的区别主要有: concat是连接数组,不会修改原数组,返回值为连接后的数组,与push的重要区别是concat会展开数组的第一层子数组 push是添加数组元素.就地修改原数组,返回值为添加的新项,push不会展开传入的数组. 复制代码 代码如下: var a = [1,2,3,4]; var b = [4,5,6,7]; var c = a.push(b); var d = a.concat(b); console.log('a',a);

  • html dom节点操作(获取/修改/添加或删除)

    HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 HTML DOM 将 HTML 文档视作树结构.这种结构被称为节点树: HTML DOM Tree 实例 http://www

  • javascript dom操作之cloneNode文本节点克隆使用技巧

    true:完全的复制一个节点,什么叫完全呢,就是复制一切,包括他的子节点,以至于文本节点,凡是有的,一律克隆,所谓完全 false:只克隆当前节点,不克隆任何的子节点,当然也不会克隆他所包裹的文本,因为任何文本都有指向他的节点(文本节点) 当然有时候两者是可以通用的哦,如果要复制的节点没有任何的子节点,这是二者全等:比如 img... 为了让大家理解的更为深刻,举个小例子吧: 复制代码 代码如下: <div> <span>Shadow</span> |No Shadow

  • javascript获取dom的下一个节点方法

    javascript获取dom的下一个节点方法

    利用javascript 写一个在页面点击加减按钮实现数字的累加. 简略的html大概如此.看得懂就好不要在意这些细节啊 <input type="button" value="+" onclick="jia(this)" /> <label class="num">0</label> <input type="button" value="-"

  • JavaScript DOM节点添加示例

    <!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">这是一个段落.</p> <p id="p2">这是另一个段落.</p> </div> <script> var para=document.createElement("h1"); var nod

  • js和jquery对dom节点的操作(创建/追加)

    复制代码 代码如下: <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Button1').click(function () { // var ha = '<p>a</p>'; // $('div').app

随机推荐