How to move an element into another element?

Question

3 Answers

Nadira · Answer 1 · 2024-06-07T18:45:32+0000

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>

Nadira · Answer 2 · 2024-06-07T18:47:05+0000

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");

Nadira · Answer 3 · 2024-06-07T18:48:38+0000

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.