cloneNode和replaceChild
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的更多相关文章
- 回流(reflow)与重绘(repaint)
最近项目排期不紧,于是看了一下之前看了好久也没看明白的chrome调试工具的timeline.但是很遗憾,虽然大概懂了每一项是做什么的,但是用起来并不能得心应手.所以今天的重点不是timeline,而 ...
- jQuery 源码分析(二十) DOM操作模块 插入元素 详解
jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为 ...
- 浏览器渲染页面原理,reflow、repaint及其优化
浏览器的主要组件包括: 1. 用户界面 - 包括地址栏.前进/后退按钮.书签菜单等.除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面. 2. 浏览器引擎 - ...
- [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用
本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),clo ...
- javascript 节点操作拷贝节点cloneNode()
cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没 ...
- 复制节点(cloneNode)
DOM提供用来复制节点方法. cloneNode():将为给定节点创建一个副本,这个方法的返回值是一个指向新建克隆节点的引用指针, reference = node.cloneNode(deep) 这 ...
- Node.cloneNode()方法
概述 返回调用该方法的节点的一个副本. 语法 var dupNode = node.cloneNode(deep);node将要被克隆的节点dupNode克隆生成的副本节点deep 可选是否采用深度克 ...
- cloneNode小结
js原生API中有个cloneNode,还有一个可选的参数, true代表复制子节点,包括任何包裹在标签之间的东西,当然包括文本节点,也就是标签之间有什么,它就会不假思索的全部都克隆一份. false ...
- JQ中的clone()方法与DOM中的cloneNode()方法
JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(de ...
随机推荐
- 网络基础tcp/ip协议三
数据链路层:(位于网络层与物理层之间) 数据链路层的功能: 数据链路的建立,维护. 帧包装,帧传输,帧同步. 帧的差错恢复. 流量的控制. 以太网:(工作在数据链路层) CSMA/CD(带冲突检测的载 ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- directdraw显示rgb555
// TODO: 在此添加控件通知处理程序代码 height=width=widthBytes=0; m_screen.SetWindowPos(&CWnd::wndBottom,0,0, ...
- hi3531串口波特率计算
波特率配置 通过配置寄存器UART_IBRD 和UART_FBRD 可以设置UART 工作的波特率,波特率 计算公式为: 当前波特率=UART 参考时钟频率(1/2 总线时钟频率)/(16 x 分频系 ...
- Java获取某年某周的第一天
Java获取某年某周的第一天 1.设计源码 FirstDayOfWeek.java: /** * @Title:FirstDayOfWeek.java * @Package:com.you.freem ...
- Caused by: java.lang.ClassNotFoundException: ognl.PropertyAccessor
1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...
- winhex中判断+MBR+DBR+EBR方法
[/hide] 扇区开始描述). 用 winhex 做U盘免疫AUTO.INF 用WinHex制作无法修改的AutoRun.inf文件 在我们日常工作中,经常需要使用闪存(也称为U盘或者优盘)主要是A ...
- WPF自学入门(一)WPF-XAML基本知识
一.基本概念 1.XAML是派生自XML的可扩展应用程序标记语言(Extensible Application Markup Language)由微软创造应用在WPF,Silverlight等开发技术 ...
- 2016四川省赛 Floyd-Warshall
这题真的有毒 首先你忽略 N-M < 100 的条件你就gg吧 其次就算你知道了怎么做之后 还有可能因为写vector或者各种常数大的原因被卡 #include<iostream> ...
- 【转】Java中hashCode的作用
以下是关于HashCode的官方文档定义: hashcode方法返回该对象的哈希码值.支持该方法是为哈希表提供一些优点,例如,java.util.Hashtable 提供的哈希表. hashCode ...