HTML DOM Element cloneNode() 方法

定義和用法

cloneNode() 方法創建節點的副本，并返回該副本。

cloneNode() 方法克隆所有屬性及其值。

如果您還想克隆后代（子代），請將 deep 參數設置為 true。

插回

如需將克隆的節點插回文檔中，請使用：

appendChild() 方法

insertBefore() 方法

另請參閱：

adoptNode() 方法

importNode() 方法

createElement() 方法

createTextNode() 方法

實例

例子 1

將 <li> 元素從 "myList2" 復制到 "myList1"：

const node = document.getElementById("myList2").lastChild;
const clone = node.cloneNode(true);
document.getElementById("myList1").appendChild(clone);

克隆之前：

  • Coffee
  • Tea
  • Water
  • Milk

克隆之后：

  • Coffee
  • Tea
  • Milk
  • Water
  • Milk

親自試一試

例子 2

復制 "demo" 元素，包括其屬性和子元素，并將其追加到文檔中：

const node = document.getElementById("demo");
const clone = node.cloneNode(true);
document.body.appendChild(clone);

親自試一試

語法

node.cloneNode(deep)

參數

參數 描述
deep

可選。

  • false - 默認。僅克隆節點及其屬性
  • true - 克隆節點、其屬性和后代

返回值

類型 描述
Node 對象 被克隆的節點。

瀏覽器支持

element.cloneNode() 是 DOM Level 1 (1998) 特性。

所有瀏覽器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持