How to move all HTML element children to another parent using JavaScript?
JavascriptHtmlDom ManipulationJavascript Problem Overview
Imagine:
<div id="old-parent">
<span>Foo</span>
<b>Bar</b>
Hello World
</div>
<div id="new-parent"></div>
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:
<div id="old-parent"></div>
<div id="new-parent">
<span>Foo</span>
<b>Bar</b>
Hello World
</div>
The answer of the question from which this is a proposed duplicate would result in:
<div id="new-parent">
<div id="old-parent">
<span>Foo</span>
<b>Bar</b>
Hello World
</div>
</div>
Javascript Solutions
Solution 1 - Javascript
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');
function move() {
while (oldParent.childNodes.length > 0) {
newParent.appendChild(oldParent.childNodes[0]);
}
}
#old-parent {
background-color: red;
}
#new-parent {
background-color: green;
}
<div id="old-parent">
<span>Foo</span>
<b>Bar</b> Hello World
</div>
<div id="new-parent"></div>
<br>
<button onclick="move()" id="button">Move childs</button>
Solution 2 - Javascript
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()
It's supported by every browser except IE.
Solution 3 - Javascript
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 >= 0; i--)
{
setParent(a.childNodes[0], b);
}
Solution 4 - Javascript
If you not use -
in id's names then you can do this
oldParent.id='xxx';
newParent.id='oldParent';
xxx.id='newParent';
oldParent.parentNode.insertBefore(oldParent,newParent);
#newParent { color: red }
<div id="oldParent">
<span>Foo</span>
<b>Bar</b>
Hello World
</div>
<div id="newParent"></div>
Solution 5 - Javascript
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!