node.cloneNode(deep)

var node=document.getElementById("myList2").lastChild.cloneNode(true);
document.getElementById("myList1").appendChild(node); var node = document.getElementById("demo");
console.log(node.firstChild);
console.log(node.firstElementChild);
console.log(node.childNodes);

  如果您需要克隆所有后代,请把 deep 参数设置 true,否则设置为 false。

node.replaceChild(newnode,oldnode);

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

<p id="demo">点击按钮来替换列表中的首个项目。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var textnode=document.createTextNode("Water");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
</script>

  

cloneNode和replaceChild的更多相关文章

  1. 回流(reflow)与重绘(repaint)

    最近项目排期不紧,于是看了一下之前看了好久也没看明白的chrome调试工具的timeline.但是很遗憾,虽然大概懂了每一项是做什么的,但是用起来并不能得心应手.所以今天的重点不是timeline,而 ...

  2. jQuery 源码分析(二十) DOM操作模块 插入元素 详解

    jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为 ...

  3. 浏览器渲染页面原理,reflow、repaint及其优化

    浏览器的主要组件包括: 1.      用户界面 - 包括地址栏.前进/后退按钮.书签菜单等.除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面. 2.      浏览器引擎 - ...

  4. [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用

    本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),clo ...

  5. javascript 节点操作拷贝节点cloneNode()

    cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没 ...

  6. 复制节点(cloneNode)

    DOM提供用来复制节点方法. cloneNode():将为给定节点创建一个副本,这个方法的返回值是一个指向新建克隆节点的引用指针, reference = node.cloneNode(deep) 这 ...

  7. Node.cloneNode()方法

    概述 返回调用该方法的节点的一个副本. 语法 var dupNode = node.cloneNode(deep);node将要被克隆的节点dupNode克隆生成的副本节点deep 可选是否采用深度克 ...

  8. cloneNode小结

    js原生API中有个cloneNode,还有一个可选的参数, true代表复制子节点,包括任何包裹在标签之间的东西,当然包括文本节点,也就是标签之间有什么,它就会不假思索的全部都克隆一份. false ...

  9. JQ中的clone()方法与DOM中的cloneNode()方法

    JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(de ...

随机推荐

  1. hive上mysql元数据库配置

    hive调试信息显示模式: ./hive -hiveconf hive.root.logger=DEBUG,console 非常有用. 默认情况下,Hive元数据保存在内嵌的 Derby 数据库中,只 ...

  2. 5_Longest Palindromic Substring(Manacher) --LeetCode

    参考:https://www.felix021.com/blog/read.php?2040,https://segmentfault.com/a/1190000002991199 做了修改. 首先用 ...

  3. DirectDraw读书笔记

    DirectDraw对象 DirectDraw对象是DirectDraw应用程序的核心.它是你在建立DirectDraw应用程序时所要创建的第一个对象,再用它来创建所有其它相关的对象.通过调用Dire ...

  4. Java中用正则表达式判断日期格式是否正确

    1.Java中用正则表达式判断日期格式是否正确 DateType.java: /** * @Title:DateType.java * @Package:com.you.dao * @Descript ...

  5. JavaScript获取当前日期

    JavaScript获取当前日期 具体实现如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  6. MySQL插入数据异常

    MySQL插入数据异常 1.错误如下: com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException:Dupli ...

  7. Java中集合List,Map和Set的区别

    Java中集合List,Map和Set的区别 1.List和Set的父接口是Collection,而Map不是 2.List中的元素是有序的,可以重复的 3.Map是Key-Value映射关系,且Ke ...

  8. CentOS中对ext4文件系统做磁盘配额

    1.修改/etc/fstab文件,使ext4文件系统支持磁盘配额. UUID="9e6dc1e8-4fc1-4984-be38-524573572d41" /mnt/ext ext ...

  9. 畅通工程 HDU - 1232

    某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府"畅通工程"的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连,只要互相间接 ...

  10. 戏说java多线程之CyclicBarrier(循环栅栏)的CyclicBarrier(int parties)构造方法

    CyclicBarrier是JDK 1.5 concurrent包出现的一个用于解决多条线程阻塞,当达到一定条件时一起放行的一个类.我们先来看这样一个简单的需求. 现在我有一个写入数据的类,继承Run ...