HTML - DOM 元素 cloneNode() 方法

**cloneNode()** 方法复制一个节点，包括其属性和子节点，这允许动态内容生成，并支持对文档结构进行各种操作。

cloneNode 中的 **“deep”** 参数是可选的，它控制克隆深度：将其值设置为 'true' 执行深度克隆；将其值设置为 'false' 执行浅克隆。

语法

originalNode.cloneNode(deep);

参数

此方法接受如下所示的单个参数。

参数	描述
deep	布尔值，指示是否在克隆中包含所有子元素，它是可选参数。

返回值

此方法返回克隆节点。

HTML DOM 元素 'cloneNode()' 方法示例

以下是一些说明如何使用 cloneNode 复制各种 HTML DOM 元素的示例。

克隆按钮元素

此示例创建按钮的副本，并允许在每次点击 **按钮** 时，按钮元素被克隆并追加到文档主体。

<!DOCTYPE html>
<html>

<body>
    <button id="originalButton">Click me</button>    
    <script>
        var originalButton = 
        document.getElementById('originalButton');
        var cloneCount = 0;    

        // Function to handle button click and clone
        originalButton.addEventListener
        ('click', function() {

            // Increment the clone counter
            cloneCount++; 

            // Clone the original button
            var clonedButton = 
            originalButton.cloneNode(true);
            clonedButton.textContent = 
            'Click me (Clone ' + cloneCount + ')';  
            document.body.appendChild(clonedButton); 
        });
    </script>
</body>

</html>

克隆列表元素

此示例克隆 **列表** 元素及其子列表项。

<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            border: 1px solid #ccc;
            width: 200px;
        }
        button {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <ul id="originalList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <button id="cloneButton">Clone List</button>
    <script>
        var originalList = 
        document.getElementById('originalList');
        var cloneButton = 
        document.getElementById('cloneButton');        
        cloneButton.addEventListener
        ('click', function() {
            var clonedList = 
            originalList.cloneNode(true);
            // Optional: Assign an id to cloned list
            clonedList.id = 'clonedList'; 
            document.body.appendChild(clonedList);
        });
    </script>
</body>

</html>

克隆 div 元素

此示例克隆 **<div>** 元素及其所有子元素，包括文本和其他元素。

<!DOCTYPE html>
<html>
<head>
    <title>Clone DIV Element</title>
    <style>
        .original { 
            padding: 20px;
            margin: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }
        .cloned { 
            padding: 20px;
            margin: 10px;
            border: 1px solid #999;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="original" id="originalDiv"> 
         Original DIV 
    (click me to clone)
    </div>    
    <script>
        var originalDiv = 
        document.getElementById('originalDiv');
        var cloneCount = 0;         
        originalDiv.addEventListener
        ('click', function() {
            // Increment the clone counter
            cloneCount++;
            // Clone the original div
            var clonedDiv = originalDiv.cloneNode(true);
            
            // Customize the cloned div content 
            clonedDiv.textContent = 
            'Cloned DIV ' + cloneCount;
            clonedDiv.classList.add('cloned'); 
            document.body.appendChild(clonedDiv);
        });
    </script>
</body>

</html>

克隆表格元素

此示例克隆 **表格** 元素及其行和列。

<!DOCTYPE html>
<html>
<head> 
    <style>
        table {
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px; 
        }
        button { 
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table id="originalTable">
        <tr>
            <th>Name</th>
            <th>Salary</th>
        </tr>
        <tr>
            <td>Nilesh</td>
            <td>43,000,000</td>
        </tr>
        <tr>
            <td>Nikki</td>
            <td>43,101,000</td>
        </tr>
    </table>
    <button id="cloneButton">Clone Table</button>
    <br><br>
    <script>
        var originalTable = 
        document.getElementById('originalTable');
        var cloneButton = 
        document.getElementById('cloneButton');
        cloneButton.addEventListener
        ('click', function() {
            var clonedTable = 
            originalTable.cloneNode(true);
            document.body.appendChild(clonedTable);
        });
    </script>
</body>

</html>

支持的浏览器

方法
cloneNode()	是 1	是 12	是 1	是 1	是 7

html_dom_element_reference.htm

打印页面