此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

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

规范

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

浏览器兼容性