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 支持 支持 支持 支持