Move an element inside another element with JavaScript/jQuery
This post will discuss how to move an element inside another element in JavaScript and jQuery.
jQuery Solution:
There are several ways to move an element inside another element with jQuery:
1. Using append() method
The .append() method inserts the specified content after the last child of the target.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $("button").click(function() { $("#container").append($("#submit")); }) }); |
HTML
|
1 2 3 4 5 6 7 |
<div id="container"> <label>Enter your name:</label> <input type="text"> </div> <div id="submit"> <button>Submit</button> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 |
#container { background-color: lightgrey; padding: 5px; } button { padding: 3px; margin: 5px; } |
2. Using prepend() method
The .prepend() method inserts the specified content before the first child of the target.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $("button").click(function() { $("#container").prepend($("#submit")); }) }); |
HTML
|
1 2 3 4 5 6 7 |
<div id="container"> <label>Enter your name:</label> <input type="text"> </div> <div id="submit"> <button>Submit</button> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 |
#container { background-color: lightgrey; padding: 5px; } button { padding: 3px; margin: 5px; } |
3. Using appendTo() method
The appendTo() method is similar to the append() method but has a different syntax with respect to the placement of the content and target.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $("button").click(function() { $("#submit").appendTo("#container"); }) }); |
HTML
|
1 2 3 4 5 6 7 |
<div id="container"> <label>Enter your name:</label> <input type="text"> </div> <div id="submit"> <button>Submit</button> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 |
#container { background-color: lightgrey; padding: 5px; } button { padding: 3px; margin: 5px; } |
4. Using prependTo() method
The prependTo() method is similar to the prepend() method but has a different syntax with respect to the placement of the content and target.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $("button").click(function() { $("#submit").prependTo("#container"); }) }); |
HTML
|
1 2 3 4 5 6 7 |
<div id="container"> <label>Enter your name:</label> <input type="text"> </div> <div id="submit"> <button>Submit</button> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 |
#container { background-color: lightgrey; padding: 5px; } button { padding: 3px; margin: 5px; } |
Note that jQuery also offers the insertAfter() and insertBefore() methods, which inserts the content after or before the target, respectively.
JavaScript Solution:
In plain JavaScript, you can use the appendChild() method to move the existing source element in the document to the target element.
JS
|
1 2 3 4 5 |
document.getElementById("submit").onclick = function() { var fragment = document.createDocumentFragment(); fragment.appendChild(document.getElementById('submit')); document.getElementById('container').appendChild(fragment); } |
HTML
|
1 2 3 4 5 6 7 |
<div id="container"> <label>Enter your name:</label> <input type="text"> </div> <div id="submit"> <button>Submit</button> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 |
#container { background-color: lightgrey; padding: 5px; } button { padding: 3px; margin: 5px; } |
That’s all about moving an element inside another element in JavaScript and jQuery.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)