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     lt div id  source  gt       lt  div gt    into this    lt div id  destination  gt       lt  div gt    so that I have this    lt div id  destination  gt     lt div id  source  gt             lt  div gt   lt  div gt

User · Answer

You can use   To Insert After   jQuery   source   insertAfter   destination      To Insert inside another element   jQuery   source   appendTo   destination

User · Answer

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   lt div id  source  gt     lt  div gt         If you want to duplicate an element before any of the above       destination   append     source   clone        etc

User · Answer

You can use following code to move source to destination      jQuery   source           detach           appendTo   destination      try working codepen   x000D   x000D  function move     x000D   jQuery   source   x000D      detach   x000D      appendTo   destination    x000D    x000D   source  x000D    background-color red  x000D    color   ffffff  x000D    display inline-block  x000D    padding 35px  x000D    x000D   destination  x000D    background-color blue  x000D    color   ffffff  x000D    display inline-block  x000D    padding 50px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  source  gt  x000D  I am source x000D   lt  div gt  x000D   x000D   lt div id  destination  gt  x000D  I am destination x000D   lt  div gt  x000D   x000D   lt button onclick  move     gt Move lt  button gt  x000D   x000D   x000D

User · Answer

dirty size improvement of Bekim Bacaj answer   x000D   x000D  div   border  1px solid   margin  5px   x000D   lt div id  source  onclick  destination appendChild this   gt click me lt  div gt  x000D   lt div id  destination   gt     lt  div gt  x000D   x000D   x000D

User · Answer

You can use pure JavaScript  using appendChild   method        The appendChild   method appends a node as the last child of a node       Tip  If you want to create a new paragraph  with text  remember to   create the text as a Text node which you append to the paragraph  then   append the paragraph to the document       You can also use this method to move an element from one element to   another       Tip  Use the insertBefore   method to insert a new child node before a   specified  existing  child node    So you can do that to do the job  this is what I created for you  using appendChild    run and see how it works for your case    x000D   x000D  function appendIt     x000D    var source   document getElementById  source    x000D    document getElementById  destination   appendChild source   x000D    x000D   source   x000D    color  white  x000D    background  green  x000D    padding  4px 8px  x000D    x000D   x000D   destination   x000D    color  white  x000D    background  red  x000D    padding  4px 8px  x000D    x000D   x000D  button   x000D    margin-top  20px  x000D    x000D   lt div id  source  gt  x000D     lt p gt Source lt  p gt  x000D   lt  div gt  x000D   x000D   lt div id  destination  gt  x000D     lt p gt Destination lt  p gt  x000D   lt  div gt  x000D   x000D   lt button onclick  appendIt    gt Move Element lt  button gt  x000D   x000D   x000D

User · Answer

I noticed huge memory leak  amp  performance difference between insertAfter  amp  after or insertBefore  amp  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

User · Answer

You may also try       destination   html     source      But this will completely overwrite anything you have in  destination

User · Answer

Ever tried plain JavaScript    destination appendChild source        x000D   x000D  onclick   function    destination appendChild source     x000D  div  margin   1em     x000D   destination  border  solid 1px red    x000D   source  border  solid 1px gray    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D    lt body gt  x000D   x000D     lt div id  destination  gt  x000D         x000D     lt  div gt  x000D     lt div id  source  gt  x000D         x000D     lt  div gt  x000D   x000D    lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D      appendTo   click function     x000D        moveMeIntoMain   appendTo     main     x000D      x000D      prependTo   click function     x000D        moveMeIntoMain   prependTo     main     x000D      x000D   main   x000D    border  2px solid blue  x000D    min-height  100px  x000D    x000D   x000D   moveMeIntoMain   x000D    border  1px solid red  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  main  gt main lt  div gt  x000D   lt div id  moveMeIntoMain  class  moveMeIntoMain  gt move me to main lt  div gt  x000D   x000D   lt button id  appendTo  gt appendTo main lt  button gt  x000D   lt button id  prependTo  gt prependTo main lt  button gt  x000D   x000D   x000D

User · Answer

For the sake of completeness  there is another approach wrap   or wrapAll   mentioned in this article  So the OP s question could possibly be solved by this  that is  assuming the  lt div id  destination    gt  does not yet exist  the following approach will create such a wrapper from scratch - the OP was not clear about whether the wrapper already exists or not        source   wrap   lt div id  destination    gt       or     source   wrapAll   lt div id  destination    gt        It sounds promising  However  when I was trying to do     id  row    wrapAll   lt fieldset gt  lt  fieldset gt    on multiple nested structure like this    lt div id  row1  gt       lt label gt Name lt  label gt       lt input     gt   lt  div gt    It correctly wraps those  lt div gt     lt  div gt  and  lt input gt     lt  input gt  BUT SOMEHOW LEAVES OUT the  lt label gt     lt  label gt   So I ended up use the explicit    row1   append   a predefined fieldset   instead  So  YMMV

User · Answer

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

User · Answer

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

User · Answer

I just used       source   prependTo   destination      Which I grabbed from here

[javascript] How to move an element into another element?

Examples related to javascript

Examples related to jquery

Examples related to html