How to move an element into another element?

You may want to use the appendTo function (which adds to the end of the element):

$("#source").appendTo("#destination");

Alternatively you could use the prependTo function (which adds to the beginning of the element):

$("#source").prependTo("#destination");

Example:

Show code snippet

$("#appendTo").click(function() {  $("#moveMeIntoMain").appendTo($("#main"));});$("#prependTo").click(function() {  $("#moveMeIntoMain").prependTo($("#main"));});

#main {  border: 2px solid blue;  min-height: 100px;}.moveMeIntoMain {  border: 1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="main">main</div><div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div><button id="appendTo">appendTo main</button><button id="prependTo">prependTo main</button>

Expand snippet