复制节点(cloneNode)
DOM提供用来复制节点方法。
cloneNode():将为给定节点创建一个副本,这个方法的返回值是一个指向新建克隆节点的引用指针,
reference = node.cloneNode(deep)
这个方法只是有一个布尔类型的参数,它的可取值只能是true和false,这个参数决定着是否要把复制节点的子节点也一同复制到新建节点里面去,如果这个参数值是true,新节点包含着被复制完全一样的子节点。如果这个参数值是false,新节点将不包括任何子节点---,如果被复制节点是一个元素节点,着意味着包含在被复制节点里的所有文本将不会被复制,但是属性节点会被复制:
reference = node.cloneNode(true);
reference = node.cloneNode(false);
cloneNode()方法所返回的引用指针指向一个节点对象。新节点有着与被复制节点完全一样的nodeType()和nodeName的属性值:
var para = document.createElement("p");
var newpara = para.cloneNode(false);
在这个例子中先创建新的元素节点para,然后通过复制para元素节点有创建一个新的元素节点newpara,para.nodeType返回值将是1,newpara.nodeType返回的值也将是1。
再来看一个例子:
var message = document.createElement("hello world");
var newmessage = meaage.cloneNode(false);
在此例子中,我们先创建了一个新的文本节点message,然后通过复制message文本节点又创建了一个新的文本节点newmessage。message.nodeType/返回值将是3,
在下面的例子中,给定节点和它的子节点都被复制到新的节点里面:
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
var newpara = para.cloneNode(true);
因为在发出para.cloneNode()调用时候传递的参数是true,所以新创建的元素节点newpara也将有一个包含着文本“hello word”的子文本节点。
下面这段代码在复制节点时没有把子节点包括进来:
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
var newpara = para.cloneNode(false);
与被复制的para节点一样,新节点newpara也是一个元素节点。para节点还有一个包含着文本“hello world”的自文本节点,但newpara节点没有任何自节点。
用cloneNode()方法复制出来的新节点不会被自动添加到文档里面,新节点没有nodeParent属性。如果想把新节点添加到你的文档里,则需要使用appendChild()或insertBefore()方法或者replaceChild()方法。
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChile(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);
document.body.appendChild(newpara);
在此例子中,第一条语句创建了一个para文本段元素,第二条语句创建了一个message文本节点,第三条语句把message文本节点插入para元素节点,第四条语句把para插入文档body元素,接下来,第五条语句调用cloneNode()方法从para节点复制出了一个新的元素节点newpara,第六条语句把newpara插入文档的body元素,最后两个相同的文本段被插入了文档。
请注意:如果被复制元素有一个独一无二的id属性,千万不要忘记对复制出来的新元素的id属性进行修改,在同一个文档里面,不同元素的id属性值必须各不相同。
最新文章
- Android消息传递之EventBus 3.0使用详解
- Python3.5 day3作业二:修改haproxy配置文件。
- <;<;<; tomcat启动报错StandardServer.await: create[8005]
- 转-HttpClient4.3 连接管理
- 获取MySQL服务提供的sakila数据库(Example Databases)
- iOS开发之Objective-C与JavaScript的交互(转载)
- CSS(一)
- 12.编写一个Java项目,定义包,在包下定义包含main方法的类,在main方法中声明8种基本数据类型的变量并赋值,练习数据类型转换。
- 学好C++必须要注意的十八个问题
- java.lang.NumberFormatException: empty String 错误
- ceph install
- iOS创建本地通知和删除对应的通知,工作日通知
- python3.5连接oracle数据及数据查询
- 关于LeetCode上链表题目的一些trick
- SX_WIN10X64LTSB2016_EN_LITE英文精简版
- requests.get() 的 headers 参数
- Swoole 结合TP5创建http服务
- Swift重写UIButton的图片和标题的位置
- jwplayer使用方法
- Dalsa线扫相机配置-一台工控机同时连接多个GigE相机
热门文章
- ArangoDB数据导入
- gym102302E_Chi&#39;s performance
- 前端技术之:如何在vuex状态管理action异步调用结束后执行UI中的方法
- [2018-07-4] django笔记
- 【翻译】Prometheus 2.12.0 新特性
- NOI导刊集训感言
- 1. 彤哥说netty系列之开篇(有个问卷调查)
- 爬虫学习--Day4(小猿圈爬虫开发_2)
- SqlServer设置特定用户操作特定表(插入、删除、更新、查询 的权限设置)
- 在VMware环境下安装Windows2008