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①

瀏覽器相容性