How to move an element into another element?

Question

I would like to move one DIV element inside another. For example, I want to move this (including all children):

<div id="source"> ... </div> 

into this:

<div id="destination"> ... </div> 

so that I have this:

<div id="destination">   <div id="source">     ...   </div> </div> 

Answer 1

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:

$("#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>