JavaScript cloneNode() 方法 - JavaScript 教程

概述: 在本教程中，您将学习如何使用 JavaScript cloneNode() 方法来克隆元素。

cloneNode() 方法介绍

cloneNode() 是 Node 接口的一种方法，允许您克隆元素。

let clonedNode = originalNode.cloneNode(deep);Code language: JavaScript (javascript)

参数

deep

cloneNode() 方法接受一个可选参数 deep。

如果 deep 为 true，则克隆原始节点及其所有后代。
如果 deep 为 false，则仅克隆原始节点。所有节点的后代将不会被克隆。

如果您省略 deep 参数，则其默认值为 false。

originalNode

originalNode 是要克隆的元素。

返回值

cloneNode() 返回 originalNode 的副本。

使用说明

除了 DOM 结构外，cloneNode() 还复制原始节点的所有属性和内联监听器。但是，它不会复制通过 addEventListener() 添加的事件监听器，也不会复制分配给元素属性的事件监听器，例如 originalNode.onclick = eventHandler()。

如果您克隆一个带有 id 属性的节点并将克隆节点放置在同一个文档中，则 id 将被复制。在这种情况下，您需要在将它添加到 DOM 树之前更改 id。

JavaScript cloneNode() 方法示例

以下示例使用 cloneNode() 方法复制 <ul> 元素并将它放置在同一个文档中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript cloneNode() Demo</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Services</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
    <script>
        let menu = document.querySelector('#menu');
        let clonedMenu = menu.cloneNode(true);
        clonedMenu.id = 'menu-mobile';
        document.body.appendChild(clonedMenu);
    </script>
</body>
</html>
Code language: HTML, XML (xml)

工作原理。

首先，使用 querySelector() 方法选择 id 为 menu 的 <ul>。
其次，使用 cloneNode() 方法创建 <ul> 元素的深层克隆。
第三，更改克隆元素的 id 以避免重复。
最后，使用 appendChild() 方法将克隆元素追加到 document.body 的子节点。

输出

总结

使用 node.cloneNode() 方法克隆节点。
将 true 传递给 cloneNode() 方法以创建 DOM 元素的深层克隆。

测验

本教程对您有帮助吗？