Skip to content
Related Articles

Related Articles

Improve Article
jQuery | Move an element into another element
  • Last Updated : 28 Mar, 2019

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:






<!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>

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:




<!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>

Output:

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :