JavaScript Node.appendChild、Node.cloneNode的区别
参考 MDN Web 文档
Node.appendChild
// 创建一个新的段落p元素,然后添加到body的最尾部
var p = document.createElement("p");
document.body.appendChild(p);
如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.
如果你需要保留这个子节点在原先位置的显示,则你需要先用
Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.这个方法只能将某个子节点插入到同一个文档的其他位置,如果你想跨文档插入,你需要先调用
document.importNode方法.
Node.cloneNode
var dupNode = node.cloneNode(deep);
node
将要被克隆的节点
dupNode
克隆生成的副本节点
deep 可选
是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.
var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);
参考资料
-
Node.appendChild - Web API 接口参考 | MDN
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild -
Node.cloneNode - Web API 接口参考 | MDN
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/cloneNode
