Move an element into another element in jQuery

Move the HTML content (including all children) of one element into another element with the help of jQuery. So, let’s see how to move an element into another element.

Suppose, you want to move one DIV element inside another div.

For example, this div element:

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

Into this:

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

So that, finally I get this:

<div id="destinationDiv">
<div id="sourceDiv">
...
</div>
</div>

There are lots of functions in jQuery by which you can move an element into another.

Example with appendTo function:

$("#sourceDiv").appendTo("#destinationDiv");

Alternatively you could use the prependTo function:

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

Actually, both function creates a copy of the element.

So, for moving you can detach first and append to destination also.

$("#sourceDiv").detach().appendTo('#destinationDiv');

Read Also: Getting all element attributes values in jQuery

You can also select an element on the page and insert it into another:

$('.container').append($('h2'));

If an element which is selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned).

A quick plugin will give a good answer:

(function($){
$.fn.moveToElement = function(selector){
return this.each(function(){
var cln = $(this).clone();
$(cln).appendTo(selector);
$(this).remove();
});
};
})(jQuery);

Usage:

$('#sourceDiv').moveToElement('#destinationDiv');

What about in JavaScript?

First declare a fragment like below:

var fragment = document.createDocumentFragment();

Then, append desired element to the fragment:

fragment.appendChild(document.getElementById('source'));

And, append fragment to desired element:

document.getElementById('destination').appendChild(fragment);