Node.appendChild、Node.cloneNode

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/cloneNode

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);