HTML DOM cloneNode()用法及代码示例

HTML DOM cloneNode() 方法用于创建给定节点的副本，在该节点上调用 cloneNode() 方法并返回克隆。 cloneNode() 方法克隆给定节点的所有属性和值。

用法

以下是 cloneNode() 方法的语法 -

yourNode.cloneNode([deep])

这里， deep 是一个可选参数。通过将其值设置为 true，我们指定应该克隆给定节点及其子节点及其属性和值，通过将其值设置为 false，我们指定我们只想复制给定节点及其属性和值，而不是它的子节点.

示例

让我们看一个 HTML DOM cloneNode() 方法的例子 -

<!DOCTYPE html>
<html>
<head>
<title>CLONE NODE</title>
<style>
h1{color:green;}
h2{ color:blue; }
</style>
</head>
<body>
<div id="DIV1">
<h1> HEADING 1</h1>
<h2> HEADING 2</h2>
</div>
<button onclick="CloneEle()"> CLONE </button>
<script>
   function CloneEle() {
      var x= document.getElementById("DIV1");
      var clone = x.cloneNode(true);
      document.body.appendChild(clone);
   }
</script>
</body>
</html>

输出

这将产生以下输出 -

单击“克隆”按钮 -

在上面的例子中 -

我们创建了一个 div 并且里面有 <h1< 和 <h2< 元素。 <h1< 和 <h2< 元素有自己的样式。

h1{color:green;}
h2{ color:blue; }
<div id="DIV1">
<h1> HEADING 1</h1>
<h2> HEADING 2</h2>
</div>

然后我们创建了一个按钮 CLONE，当用户点击时，它将执行函数 CloneEle() -

<button onclick="CloneEle()"> CLONE </button>

CloneEle() 方法将使用 getElementById() 方法获取 div 元素并将其分配给变量 x。然后我们使用参数为 true 的 <div> 上的 cloneNode(ture) 方法来克隆它及其子元素并将它们分配给变量 clone。然后使用 appendChild() 方法将克隆变量附加到文档正文 -

function CloneEle() {
   var x= document.getElementById("DIV1");
   var clone = x.cloneNode(true);
   document.body.appendChild(clone);
}

相关用法

注：本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM cloneNode() method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。