HTML DOM cloneNode() 方法

语法

cloneNode() 方法的语法如下：

var clonedNode = node.cloneNode(deep);

• node 是要复制的节点。
• deep 是一个布尔值，表示是否深度复制节点的子节点。如果设置为 true，则会深度复制节点的所有子节点；如果设置为 false，则只会复制节点本身，不会复制子节点。

示例

浅复制节点

首先，让我们看一个简单的示例，演示如何进行浅复制节点：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Clone Node Example</title>
</head>
<body>
    <div id="original">
        <p>Hello, World!</p>
    </div>

    <script>
        var originalNode = document.getElementById('original');
        var clonedNode = originalNode.cloneNode(false);

        document.body.appendChild(clonedNode);
    </script>
</body>
</html>

在这个示例中，我们首先创建了一个包含一个 <p> 元素的 <div> 节点，然后使用 cloneNode(false) 方法对这个节点进行浅复制。最后，将复制后的节点添加到文档中。

深复制节点

接下来，让我们看一个示例，演示如何进行深复制节点：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Clone Node Example</title>
</head>
<body>
    <div id="original">
        <p>Hello, World!</p>
    </div>

    <script>
        var originalNode = document.getElementById('original');
        var clonedNode = originalNode.cloneNode(true);

        document.body.appendChild(clonedNode);
    </script>
</body>
</html>

在这个示例中，我们使用 cloneNode(true) 方法对节点进行深复制，这样不仅会复制节点本身，还会复制节点的所有子节点。最后，将复制后的节点添加到文档中。

总结

通过本文的介绍，你应该对 cloneNode() 方法有了更深入的了解。这个方法在处理 DOM 元素时非常有用，可以帮助我们快速复制节点并进行相应的操作。希望本文对你有所帮助，谢谢阅读！