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. hyper-v虚拟机上的centos多节点k8s集群实践

    之前体验了minikube,掉深坑里至今还没有爬出来,玩单节点用minikube够了, 但傻瓜试的安装让人对k8s理解不是很深刻(坑),而且多节点好像有什么奇怪的问题 所以我这次要用两个虚拟机来模拟k ...

  2. 【java基础】接口是否能有实现类?

    接口是否能有实现方法 我的回答: 当然可以 java8以后就允许接口有实现方法: default修饰的方法 static修饰的方法 /** * 能用lambda的情况,接口里面只有一个未实现的方法 * ...

  3. 学习笔记02form

    1.<form>为表单标签*如果要把数据提交到服务器,则需要将<input> <textarea> <select>等表单元素放到<from> ...

  4. tarjan求lca的神奇

    题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和树根结点的序号. 接下来N-1行每 ...

  5. UiPath之基础知识(一)

    各位小伙伴,大家好.在10月份小U的微信订阅号做了一个投票,主题是UiPath目前已经掌握的程度. 从投票的结果来看,有一半以上的人还是刚刚起步,为了帮助刚刚起步的小伙伴,准备陆续发布一些基础性的内容 ...

  6. 使用.net core中的类DispatchProxy实现AOP

    在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是软件开发中的一个热点,利用A ...

  7. NLP-BM25算法理解

    前两天老师给我们讲解了BM25算法,其中包括由来解释,以及算法推导,这里我再将其整理,这里我不讲解之前的BIM模型,大家有兴趣可以自行了解.Okapi BM25:一个非二值的模型bm25 是一种用来评 ...

  8. c++中while(cin>>str)和ctrl z的相关问题探讨

    对于while (cin>>str)和ctrl z的问题,网上有以下解释: -------------------------------------------------------- ...

  9. 易初大数据 2019年11月7日 spss 王庆超

    许多统计过程也都提供描述性统计指标的输出. (2)描述(D):该过程进行一般性的统计描述.它可以输出均值.均值的标准误.方差.标准差.范围(极差).最大值.最小值.峰度和偏度. (3)探索(E):该过 ...

  10. vue的相关知识

    一.DOM vs 函数库 vs框架 DOM:  API繁琐 函数库:JQuery对DOM的每个步骤的API进行一对一的简化,但并没有改变DOM做事的步骤和方法. 框架:一个包含部分已经实现的功能的半成 ...