jQuery | Move an element into another element

There are two methods to move an element inside another element are listed below:

Method 1: Using append() method: This append() Method in jQuery is used to insert some content at the end of the selected elements.

Syntax:

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

Parameters: This method accepts two parameters as mentioned above and described below:

  • content: It is required parameter and used to specify the content which is to be inserted at the end of selected elements. The possible value of contents are HTML elements, jQuery objects and DOM elements.
  • function(index, html): It is optional parameter and used to specify the function that will return the content to be inserted.
    • index: It is used to return the index position of the element.
    • html: It is used to return the current HTML of the selected element.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>  
<html>  
  
<head
    <title
        JavaScript
    </title>
  
    <script src=
    </script>
      
    <style>
        #parent {
            height: 100px;
            width: 300px;
            background: green;
            margin: 0 auto;
        }
        #child {
            height: 40px;
            width: 100px;
            margin: 0 auto;
            color: yellow
        }
    </style>
</head
          
<body style = "text-align:center;">  
      
    <h1 style = "color:green;" >  
        GeeksForGeeks  
    </h1>  
      
    <div id= "parent"></div>
      
    <br>
      
    <h4 id= "child">
        A Computer Science Portal for geeks
    </h4>
      
    <br>
      
    <button onclick="myGeeks()"
        move
    </button
      
    <!-- Script to move element -->        
    <script
        function myGeeks() {
            $("#parent").append($("#child"));
        }
    </script
</body>  
  
</html>

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:

Method 2: Using prepend() Method: The prepend() method is an inbuilt method in jQuery which is used to insert a specified content at the beginning of the selected element.

Syntax:

$(selector).prepend(content, function)

Parameters: This method accept two parameters as mentioned above and described below:

  • content: It is required parameter which is used to specify the content need to be inserted.
  • function: It is optional parameter which is used to specify the function to perform after call.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>  
<html>  
  
<head
    <title
        JavaScript
    </title>
      
    <script src=
    </script>
      
    <style>
        #parent {
            height: 100px;
            width: 300px;
            background: green;
            margin: 0 auto;
        }
        #child {
            height: 40px;
            width: 100px;
            margin: 0 auto;
            color: yellow
        }
    </style>
</head
          
<body style = "text-align:center;">  
      
    <h1 style = "color:green;" >  
        GeeksForGeeks  
    </h1>  
      
    <div id= "parent"></div>
      
    <br>
      
    <h4 id= "child">
        A Computer Science Portal for geeks
    </h4>
      
    <br>
      
    <button onclick="myGeeks()"
        move
    </button
      
    <!-- Script to move element -->    
    <script
         function myGeeks() {
            $("#parent").prepend($("#child"));
        }
    </script
</body>  
  
</html>

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.