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

列印頁面