jQuery |将一个元素移动到另一个元素中

下面列出了两种将元素移动到另一个元素内的方法：

方法一：使用append()方法： jQuery中的这个append()方法用于在被选元素的末尾插入一些内容。

句法：

$(selector).append( content, function(index, html) )

参数：此方法接受上面提到和下面描述的两个参数：

• content：必选参数，用于指定要插入到所选元素末尾的内容。内容的可能值是 HTML 元素、jQuery 对象和 DOM 元素。
• 函数(index, html)：可选参数，用于指定返回插入内容的函数。
  • index：用于返回元素的索引位置。
  • html：用于返回被选元素的当前HTML。

例子：

  
  
  
 
     
        JavaScript
    
  
    
    
      
    
        #parent {
            height: 100px;
            width: 300px;
            background: green;
            margin: 0 auto;
        }
        #child {
            height: 40px;
            width: 100px;
            margin: 0 auto;
            color: yellow
        }
    
 
          
  
      
      
        GeeksForGeeks  
      
      
    
      
    
      
    
        A Computer Science Portal for geeks
    
      
    
      
     
        move
     
      
            
     
        function myGeeks() {
            $("#parent").append($("#child"));
        }
     
  
  

输出：

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

方法二：使用prepend()方法： prepend()方法是jQuery的一个内置方法，用于在被选元素的开头插入指定的内容。

句法：

$(selector).prepend(content, function)

参数：此方法接受上面提到和下面描述的两个参数：

• content：必填参数，用于指定需要插入的内容。
• 函数:可选参数，用于指定调用后要执行的函数。

例子：

  
  
  
 
     
        JavaScript
    
      
    
    
      
    
        #parent {
            height: 100px;
            width: 300px;
            background: green;
            margin: 0 auto;
        }
        #child {
            height: 40px;
            width: 100px;
            margin: 0 auto;
            color: yellow
        }
    
 
          
  
      
      
        GeeksForGeeks  
      
      
    
      
    
      
    
        A Computer Science Portal for geeks
    
      
    
      
     
        move
     
      
        
     
         function myGeeks() {
            $("#parent").prepend($("#child"));
        }
     
  
  

输出：

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