Node: cloneNode() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

Node 接口的 cloneNode() 方法会返回调用该方法时所处的节点的一个副本。它的参数控制是否也克隆节点所包含的子树。

克隆一个节点会复制它的所有属性及其值,包括内置(行内)的监听器。它会复制使用 addEventListener() 添加的事件监听器,也不会复制赋给元素属性的监听器(例如,node.onclick = someFunction)。此外,对于 <canvas> 元素,绘制的图像也不会被复制。

警告:cloneNode() 可能会导致文档中出现重复的元素 ID!

如果原始节点具有 id 属性,并且克隆的节点将被放置在同一个文档中,那么您应该修改克隆节点的 ID 以使其唯一。

此外,根据是否期望重复的名称,name 属性也可能需要修改。

要克隆一个节点并将其插入到另一个文档中,请改用 Document.importNode()

语法

js
cloneNode()
cloneNode(deep)

参数

deep 可选

如果为 true,则节点及其整个子树,包括可能存在于子 Text 节点中的文本,也会被复制。

如果为 false,则只克隆节点本身。节点所包含的子树(包括任何文本)都不会被克隆。

请注意,deep自闭合元素(例如 <img><input> 元素)没有影响。

返回值

新克隆的 Node。克隆的节点没有父节点,也不是文档的一部分,直到通过 Node.appendChild() 或类似方法将其添加到文档中的另一个节点为止。

示例

js
let p = document.getElementById("para1");
let p_prime = p.cloneNode(true);

规范

规范
DOM
# ref-for-dom-node-clonenode①

浏览器兼容性