轻松上手,快乐学习!

HTML DOM cloneNode() 方法


实例

拷贝一个列表项到另外一个列表:

// Get the last <li> element ("Milk") of <ul> with id="myList2"
var itm = document.getElementById("myList2").lastChild;
// Copy the <li> element and its child nodes
var cln = itm.cloneNode(true);

// Append the cloned <li> element to <ul> with id="myList1"
document.getElementById("myList1").appendChild(cln);

克隆前:

  • Coffee
  • Tea
  • Water
  • Milk

克隆后:

  • Coffee
  • Tea
  • Milk
  • Water
  • Milk
亲自试一试 »

页面下方有更多实例。


定义和用法

cloneNode() 方法创建节点的副本,并返回克隆。

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

提示: 使用 appendChild()insertBefore() 方法将克隆节点插入文档。

提示: 如果要克隆所有子体(子体),请将 deep 参数值设置为true,否则为false。


浏览器支持

方法
cloneNode() Yes Yes Yes Yes Yes

语法

node.cloneNode(deep)

参数值

参数 类型 描述
deep Boolean 可选。指定是否应克隆节点的所有子体。
  • true - 克隆节点、其属性及其子体
  • false - 默认值。仅克隆节点及其属性

技术细节

返回值: Node 节点对象,表示克隆的节点
DOM 版本 Core Level 1 Node Object

更多实例

实例

复制 <div> 元素,包括其所有属性和子元素,并将其附加到文档中:

var elmnt = document.getElementsByTagName("DIV")[0];
var cln = elmnt.cloneNode(true);
document.body.appendChild(cln);
亲自试一试 »

相关页面

HTML DOM 参考手册: document.adoptNode() 方法

HTML DOM 参考手册: document.importNode() 方法

HTML DOM 参考手册: document.createElement() 方法

HTML DOM 参考手册: document.createTextNode() 方法