How to move all HTML element children to another parent using JavaScript

Question

Imagine    lt div id  old-parent  gt       lt span gt Foo lt  span gt       lt b gt Bar lt  b gt      Hello World  lt  div gt   lt div id  new-parent  gt  lt  div gt    What JavaScript can be written to move all the child nodes  both elements  and text nodes  from old-parent to new-parent without jQuery   I don t care about whitespace between nodes  though I expect to catch the stray Hello World  they would need to be migrated as-is too   EDIT  To be clear  I want to end up with    lt div id  old-parent  gt  lt  div gt   lt div id  new-parent  gt       lt span gt Foo lt  span gt       lt b gt Bar lt  b gt      Hello World  lt  div gt    The answer of the question from which this is a proposed duplicate would result in    lt div id  new-parent  gt       lt div id  old-parent  gt           lt span gt Foo lt  span gt           lt b gt Bar lt  b gt          Hello World      lt  div gt   lt  div gt

User · Accepted Answer

DEMO  Basically  you want to loop through each direct descendent of the old-parent node  and move it to the new parent  Any children of a direct descendent will get moved with it   var newParent   document getElementById  new-parent    var oldParent   document getElementById  old-parent     while  oldParent childNodes length  gt  0        newParent appendChild oldParent childNodes 0

User · Answer

Modern way   newParent append    oldParent childNodes       append is the replacement for  appendChild  The main difference is that it accepts multiple nodes at once and even plain strings  like  append  hello     oldParent childNodes is iterable so it can be spread with     to become multiple parameters of  append     Compatibility tables of both  in short  Edge 17   Safari 10      https   developer mozilla org en-US docs Web API ParentNode append Browser compatibility https   developer mozilla org en-US docs Web JavaScript Reference Operators Spread syntax Browser compatibility

User · Answer

This answer only really works if you don t need to do anything other than transferring the inner code  innerHTML  from one to the other      Define old parent var oldParent   document getElementById  old-parent        Define new parent var newParent   document getElementById  new-parent        Basically takes the inner code of the old  and places it into the new one newParent innerHTML   oldParent innerHTML      Delete   Clear the innerHTML   code of the old Parent oldParent innerHTML         Hope this helps

User · Answer

Here s a simple function   function setParent el  newParent        newParent appendChild el       el s childNodes are the elements to be moved  newParent is the element el will be moved to  so you would execute the function like   var l   document getElementById  old-parent   childNodes length  var a   document getElementById  old-parent    var b   document getElementById  new-parent    for  var i   l  i  gt   0  i--        setParent a childNodes 0   b       Here is the Demo

User · Answer

If you not use - in id s names then you can do this   x000D   x000D  oldParent id  xxx   x000D  newParent id  oldParent   x000D  xxx id  newParent   x000D  oldParent parentNode insertBefore oldParent newParent   x000D   newParent   color  red   x000D   lt div id  oldParent  gt  x000D       lt span gt Foo lt  span gt  x000D       lt b gt Bar lt  b gt  x000D      Hello World x000D   lt  div gt  x000D   lt div id  newParent  gt  lt  div gt  x000D   x000D   x000D

[javascript] How to move all HTML element children to another parent using JavaScript?

Examples related to javascript

Examples related to html

Examples related to dom-manipulation