如何使用 jQuery 将 div 的内容复制到另一个 div 中？

给定一个包含一些 div 元素的 HTML 文档，任务是使用 jQuery 将 div 内容复制到另一个 div 作为其子级。有两种方法可以解决这个问题，下面将讨论：

方法一：

• 首先，选择需要复制到另一个 div 元素中的 div 元素。
• 选择复制 div eleemtn 的目标元素。
• 使用append() 方法将元素复制为其子元素。

示例：此示例使用 append() 方法将 div 元素复制到另一个 div 中。

  
  
  
  
      
        How to copy the content of a div 
        into another div using jQuery ?
    
      
    
    
      
    
        .parent {
            background: green;
            color: white;
        }
        .child {
            background: blue;
            color: white;
            margin: 10px;
        }  
        #GFG_UP {
            font-size: 15px;
            font-weight: bold;
        }
        #GFG_DOWN {
            font-size: 24px;
            font-weight: bold;
            color: green;
        }
    
  
  
  
      
      
        GeeksForGeeks  
     
      
    
      
    
        Outer DIV
        
            Inner DIV
        
    
      
    
      
    
        Outer DIV
    
    
      
    
        click here
    
      
    
      
      
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        up.innerHTML = "Click on the button to "
                + "copy a DIV into another DIV."; 
          
        function GFG_Fun() {
            var $el = $('.child').clone();
            $('#parent2').append($el);
            down.innerHTML = "Inner DIV is copied "
                    + "to another element.";
        } 
      
  
  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法二：

• 首先，选择需要复制到另一个 div 元素中的 div 元素。
• 选择复制 div eleemtn 的目标元素。
• 使用appendTo() 方法将元素复制为其子元素。

示例：本示例使用 appendTo() 方法将 div 元素复制到另一个 div 中。

  
  
  
  
      
        How to copy the content of a div 
        into another div using jQuery ?
    
      
    
    
      
    
        .parent {
            background: green;
            color: white;
        }
        .child {
            background: blue;
            color: white;
            margin: 10px;
        }  
        #GFG_UP {
            font-size: 15px;
            font-weight: bold;
        }
        #GFG_DOWN {
            font-size: 24px;
            font-weight: bold;
            color: green;
        }
    
  
  
  
      
      
        GeeksForGeeks  
     
      
    
      
    
        Outer DIV
        
            Inner DIV
        
    
      
    
      
    
        Outer DIV
    
    
      
    
        click here
    
      
    
      
      
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        up.innerHTML = "Click on the button to "
                + "copy a DIV into another DIV."; 
          
        function GFG_Fun() {
            $('.child').clone().appendTo('#parent2');
            down.innerHTML = "Inner DIV is copied"
                        + " to another element.";
        } 
      
  
  

输出：

• 在点击按钮之前：
  
• 点击按钮后：