Node:cloneNode() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

规范

Specification
DOM
# ref-for-dom-node-clonenode①

浏览器兼容性