How to move an element into another element?

Mark Richman Source

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>
javascriptjqueryhtml

Answers

answered 9 years ago Andrew Hare #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>

answered 6 years ago kjc26ster #2

I just used:

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

Which I grabbed from here.

answered 6 years ago sbaaaang #3

If the div where you want to put your element has content inside, and you want the element to show after the main content:

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

If the div where you want to put your element has content inside, and you want to show the element before the main content:

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

If the div where you want to put your element is empty, or you want to replace it entirely:

$("#element").html('<div id="source">...</div>');

If you want to duplicate an element before any of the above:

$("#destination").append($("#source").clone());
// etc.

answered 6 years ago Tamas #4

You may also try:

$("#destination").html($("#source"))

But this will completely overwrite anything you have in #destination.

answered 5 years ago Subrahmanyam #5

You can use:

To Insert After,

jQuery("#source").insertAfter("#destination");

To Insert inside another element,

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

answered 5 years ago Alejandro Illecas #6

my solution:

MOVE:

jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

COPY:

jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

Note the usage of .detach(). When copying, be careful that you are not duplicating IDs.

answered 4 years ago spetsnaz #7

I noticed huge memory leak & performance difference between insertAfter & after or insertBefore & before .. If you have tons of DOM elements, or you need to use after() or before() inside a MouseMove event, the browser memory will probably increase and next operations will run really slow. The solution I've just experienced is to use inserBefore instead before() and insertAfter instead after().

answered 4 years ago HMR #8

Old question but got here because I need to move content from one container to another including all the event listeners.

jQuery doesn't have a way to do it but standard DOM function appendChild does.

//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

Using appendChild removes the .source and places it into target including it's event listeners: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

answered 3 years ago Dan #9

If you want a quick demo and more details about how you move elements, try this link:

http://html-tuts.com/move-div-in-another-div-with-jquery


Here is a short example:

To move ABOVE an element:

$('.whatToMove').insertBefore('.whereToMove');

To move AFTER an element:

$('.whatToMove').insertAfter('.whereToMove');

To move inside an element, ABOVE ALL elements inside that container:

$('.whatToMove').prependTo('.whereToMove');

To move inside an element, AFTER ALL elements inside that container:

$('.whatToMove').appendTo('.whereToMove');

answered 3 years ago Subodh Ghulaxe #10

You can use following code to move source to destination

 jQuery("#source")
       .detach()
       .appendTo('#destination');

try working codepen

function move() {
 jQuery("#source")
   .detach()
   .appendTo('#destination');
}
#source{
  background-color:red;
  color: #ffffff;
  display:inline-block;
  padding:35px;
}
#destination{
  background-color:blue;
  color: #ffffff;
  display:inline-block;
  padding:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>

<div id="destination">
I am destination
</div>

<button onclick="move();">Move</button>

answered 3 years ago Ali Bassam #11

What about a JavaScript solution?

Declare a fragment:

var fragment = document.createDocumentFragment();

Append desired element to the fragment:

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

Append fragment to desired element:

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

Check it out.

answered 2 years ago Bekim Bacaj #12

Ever tried plain JavaScript... destination.appendChild(source); ?

onclick = function(){ destination.appendChild(source); }
div{ margin: .1em; } 
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }
<!DOCTYPE html>
<html>

 <body>

  <div id="destination">
   ###
  </div>
  <div id="source">
   ***
  </div>

 </body>
</html>

comments powered by Disqus