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属性值必须各不相同。

复制节点(cloneNode)的更多相关文章

  1. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法(点击后弹窗效果以及去掉效果)

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

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

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

  3. 高级复制实验配置添加复制节点操作时报错:ORA-23308: object GP.T does not exist or is invalid

    出错原因: 使用高级复制时,在源端启动复制支持,执行语句:REPADMIN@bys1>execute dbms_repcat.generate_replication_support('gp', ...

  4. jQuery 复制节点的元素实现加入到购物车功能

    描写叙述: 用户点击左边div中的商品,相应商品会自己主动加入到右面的div中,类似电子商城中的加入到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将对应信息 ...

  5. REdis主挂掉后复制节点才起来会如何?

    结论: 这种情况下复制节点(即从节点)无法提升为主节点,复制节点会一直尝试和主节点建立连接,直接成功.主节点恢复后,复制节点仍然保持为复制节点,并不会成为主节点. 复制节点无法提升为主节点的原因是复制 ...

  6. jQuery 复制节点的元素实现添加到购物车功能

    描述: 用户点击左边div中的商品,对应商品会自动添加到右面的div中,类似电子商城中的添加到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将相应信息进行克隆 ...

  7. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

    jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容   ,html() - 设置或返回所 ...

  8. SpriteKit在复制节点时留了一个巨坑给开发者,需要开发者手动把复制节点的isPaused设置为false

    根据When an overlay node with actions is copied there is currently a SpriteKit bug where the node’s is ...

  9. JQ 复制节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 汇编语言——物理地址=段地址x16+偏移地址,检测点2.2

    一.为什么 物理地址=段地址x16+偏移地址? 刚开始学时,我都笨到不明白为什么是2的N次方,咱把物理地址就当数字,计算机中数字是由很多位0或1自由组合的, 而每一位上要么是0要么是1,只有这两种情况 ...

  2. 汇编实战准备:DOS调用命令

    mov dx,offset message mov ah, int 21h 将message的偏移地址赋值给dx,之后 MOV AH,9 INT 21H 调用DOS功能,该功能为显示打印DS:DX地址 ...

  3. [考试反思]1101csp-s模拟测试97:人品

    上来粘6个图皮一下.(以后粘排行榜是不是都应该粘两份啊...文件出入的确挺难受的) 话说最近RP为什么会这么高啊???我干什么好事了???不知道. 这次考试的题挺有水准的,但是我的分数挺没水准的. T ...

  4. CSPS_104

    又被爆踩. 正解写挂. 暴力不会. 只会改题. 还要加油. T1 $nlog^2$是显然的 那么考虑只二分一次,就$nlog$了! 有什么能通过一次二分$O(1)$得到呢? 二分a的位置,$O(1)$ ...

  5. 原生JS实现栈结构

    1. 前言 栈,是一种遵从后进先出(LIFO,Later-In-First-Out)原则的有序集合.新添加的元素都保存在栈的一端,称作栈顶,另一端叫做栈底.在栈中,新元素都靠近栈顶,旧元素都靠近栈底. ...

  6. abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理八(二十六)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  7. Selenium +Chrome浏览器如何模拟手机操作

    Selenium +Chrome浏览器如何模拟手机操作 进入手机模式 打开谷歌浏览器,按F12,进入开发者模式,点击Toggle device toolbar,进入手机模式 设置Chrome的手机模式 ...

  8. VM 使用问题 | 安装失败->>注册表

    下午乌龙了一回,本来就知道注册表都卸载的乱乱的 以为安装上即可,越弄越糊涂 无法安装.... 查了注册表,发现那些都删除了 手动安装实在太过麻烦,弄了一早上. 如图:未能解决 ​ ​ ​ 后使用了清洁 ...

  9. php 5.5使用 array_column的方法

    <pre>php 5.5使用 array_column的方法</pre> <pre> public function array_column($input, $c ...

  10. Hadoop4-HDFS分布式文件系统原理

    一.简介 1.分布式文件系统钢结构 分布式文件系统由计算机集群中的多个节点构成,这些节点分为两类: 主节点(MasterNode)或者名称节点(NameNode) 从节点(Slave Node)或者数 ...