首页 > 编程笔记 > JavaScript笔记
阅读:72
JS cloneNode()方法:复制节点
JavaScript cloneNode() 方法可以创建一个节点的副本,也即复制一个节点。
由于复制的节点会包含原节点的所有特性,如果节点中包含 id 属性,就会出现 id 属性值重叠的情况。一般情况下,在同一个文档中,不同属性的 id 属性值应该不同。为了避免潜在冲突,应修改其中某个节点的 id 属性值。
示例1
在下面示例中,首先创建一个节点 p,然后复制该节点为 p1,再利用 nodeName 和 nodeType 属性获取复制节点的基本信息,该节点的信息与原来创建的节点基本相同。var p = document.createElement("p"); //创建节点 var p1 = p.cloneNode(false); //复制节点 var info = "nodeName:" + p1.nodeName; //获取复制节点的名称 info += ", nodeType:" + p1.nodeType; //获取复制节点的类型 console.log(info); //显示复制节点的名称和类型相同
示例2
以示例 1 为基础,在创建一个文本节点之后,尝试把复制的文本节点增加到段落元素之中,再把段落元素增加到标题元素中,最后把标题元素增加到 body 元素中。如果此时调用复制文本节点的 nodeName 和 nodeType 属性,则返回的 nodeType 属性值为 3,而 nodeName 属性值为 #text。var p = document.createElement("p"); //创建一个p元素 var h1 = document.createElement("h1"); //创建一个h1元素 var txt = document.createTextNode("Hello World"); //创建一个文本节点 var hello = txt.cloneNode(false); //复制创建的文本节点 p.appendChild(txt); //把复制的文本节点增加到段落节点中 h1.appendChid(p); //把段落节点增加到标题节点中 document.body.appendChild(h1); //把标题节点增加到body节点中
示例3
下面示例演示了如何复制一个节点及所有包含的子节点。当复制其中创建的标题 1 节点之后,该节点所包含的子节点及文本节点豆浆杯复制过来,然后增加到 body 元素的尾部。var p = document.createElement("p"); //创建一个p元素 var h1 = document.createElement("h1"); //创建一个h1元素 var txt = document.createTextNode("Hello World"); //创建一个文本节点 p.appendChild(txt); //把复制的文本节点增加到段落节点中 h1.appendChid(p); //把段落节点增加到标题节点中 document.body.appendChild(h1); //把标题节点增加到body节点中 var new_h1 = h1.cloneNode(true); //复制标题元素及其所有子节点 document.body.appendChild(new_h1); //把复制的新标题元素增加到文档中
由于复制的节点会包含原节点的所有特性,如果节点中包含 id 属性,就会出现 id 属性值重叠的情况。一般情况下,在同一个文档中,不同属性的 id 属性值应该不同。为了避免潜在冲突,应修改其中某个节点的 id 属性值。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频