📌  相关文章
📜  HTML | DOM cloneNode() 方法(1)

📅  最后修改于: 2023-12-03 15:15:34.918000             🧑  作者: Mango

HTML | DOM cloneNode() 方法

在 HTML DOM 中，cloneNode() 方法用于克隆一个节点。

语法
node.cloneNode(bool)

参数说明：

  • bool：可选参数，布尔值，表示是否同时克隆该节点的子节点。如果设置为 true，将克隆该节点的所有子节点。如果设置为 false，只克隆该节点本身。

返回值：

  • 克隆后的节点对象。
示例
<!DOCTYPE html>
<html>
<body>

<p>点击按钮克隆该段落。</p>

<button onclick="myFunction()">克隆</button>

<script>
function myFunction() {
  var p = document.getElementsByTagName("p")[0];
  var clone = p.cloneNode(true);
  document.body.appendChild(clone);
}
</script>

</body>
</html>

在上述示例中，我们点击按钮，将已有的段落元素进行了克隆，并且将克隆的元素添加到了文档的末尾。

注意事项
  • cloneNode() 方法只复制该节点本身，而不复制该节点的事件监听器和其他属性。
  • 克隆的节点会保留原始节点的所有特性和属性。
  • 如果要复制事件监听器等内容，需要使用深度复制，即在 cloneNode() 方法中传递参数 true。