Move an element into another element in jQuery

Move an element into another

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);
Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.
You may like:  Remove li elements of ul except first and last in jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *