HTML | DOM cloneNode() 方法

DOM cloneNode() 方法用于复制或克隆调用 cloneNode() 方法的节点。例如，可以使用此方法将列表项从一个列表复制到另一个列表。

句法：

yourNode.cloneNode([deep])

[deep]是一个可选参数。如果我们想复制节点及其属性和子节点，我们可以将其值设置为“true”，如果我们只想复制节点及其属性，则可以将其设置为“false”。

注意：如果我们不指定任何参数，则[deep]的值默认为 true。

示例 1：

  

    HTML|DOM cloneNode() Method
    
    
        h1,
        h2 {
            color: green;
        }
    

  

    
        
           GeeksforGeeks
        
  
        
          A computer science portal for geeks
        
    
  
    
        Click here to clone the above elements.
    
  
    
    
        function nClone() {
            // accessing div attribute using a
            //variable geek
            var geek = 
                document.getElementsByTagName("DIV")[0];
  
            // cloning geek variable into a variable
           //named clone
            var clone = geek.cloneNode(true);
  
            // adding our clone variable to end
             //of the document
            document.body.appendChild(clone);
        }
    

  

输出：

点击按钮前：

点击按钮后：

示例 2：

 

       
     
        HTML|DOM cloneNode() Method
        
        
        h1, h2 {
                color: green;
            } 
        
    
      

GeeksforGeeks
 A computer science portal for geeks 
Geek1Geek2
Geek3Geek4
  
Try it
  

    function clone() {
        // accessing list2 last item and storing it in a variable "geek"
            var listItem = document.getElementById("list2").lastChild; 
          
        // cloning lisItem variable into a variable named clone
        var clone = listItem.cloneNode(true);
          
            // adding our clone variable to end of the list1.
        document.getElementById("list1").appendChild(clone);     
    }


  
                    

输出：

点击按钮前：

点击按钮后：

支持的浏览器： DOM cloneNode() 方法支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器