In this simple tutorial you will learn how to move div in another div with jQuery. This trick is useful when you have limited access to html source or when you need a quick way to move an element in another element without changing the html.
Full HD Video
As an introduction in this move div in another div tutorial, I will start with an example with 1 main div A, which includes another 2 divs B and C. These 2 divs includes, each, one more div, D and E. Check the example below.
Sample HTML Structure
<div class="divA"> <div class="divB"> <div class="divD"></div> </div> <div class="divC"> <div class="divE"></div> </div> </div>
First, make sure you are loading the latest jQuery Library in your html document. You can download jQuery files from here.
Move Div in Another Div with jQuery appendTo - Under Content
Assume that you want to move div C inside div B. The problem is that inside div B there is another div. To move div in another div with jQuery you need first to think where your div must be positioned (above or below the content). I will show you both ways.
Now that you have everything loaded, is time to move div in another div with jQuery, under the content where you are moving the div. Keep in mind when targeting an object using appendTo(); function, container will be moved exactly inside the object selected, at the bottom. Check the example below:
<script> $('.divC').appendTo('.divB'); </script>
Remember to always add the script right above the ending of the </body> tag. The script above will move div C container, inside div B, exactly at the end (under div D).
Move Div in Another Div with jQuery prependTo - Above Content
This function is exactly the opposite of appendTo. Using prependTo(); will move div in another div above the content.
<script> $('.divC').prependTo('.divB'); </script>
Using my example above, div C should be moved inside div B, above div D. Check the sample image below:
Move Div in Another Div with jQuery insertAfter - Under Container
This function is a bit different than appendTo. What insertAfter(); does, is to place your selected object under the targeted object.
<script> $('.divE').insertAfter('.divB'); </script>
For example, if we select div E and target div B, our container div E will be moved exactly after div B. Check the sample image:
Move Div in Another Div with jQuery insertBefore - Above Container
Function insertBefore(); does almost the same thing as insertAfter. It will only move the selected div above the targeted div.
<script> $('.divE').insertBefore('.divB'); </script>
Using our example, if you select div E and target div B, container div E will be moved exactly above div B. Check the example below:
Hope this tutorial was helpful and clear for everyone. You can also try the Full HD video from the beginning of the article and see a live example on how to move div in another div with jQuery.
Great demonstration, thanks!
Very nice tut! Thanks for sharing. There is small correction under “Move Div in Another Div with jQuery insertAfter – Under Container”, the JavaScript should have insertAfter() but you had insertBefore().
Hello Kev,
You are right. Thank you for your observation and writing the problem back! Now the mistake is corrected. Again, thank you!
Sweet and simple.