jQuery | Move an element into another element - GeeksforGeeks

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.
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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </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:
jQuery-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
Scroll to the top of the page using JavaScript/jQuery
jQuery | children() with Examples
How to prevent Body from scrolling when a modal is opened using jQuery ?
How to redirect to a particular section of a page using HTML or jQuery?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?