obtener - ¿Cómo mover todos los elementos de elemento HTML a otro elemento primario mediante JavaScript?

innerhtml que es

Question

Imagina:

<div id="old-parent">
<span>Foo</span>
<b>Bar</b>
Hello World
</div>
<div id="new-parent"></div>

¿Qué JavaScript se puede escribir para mover todos los nodos secundarios (ambos elementos y nodos de texto) de old-parent new-parent sin jQuery?

No me importa el espacio en blanco entre los nodos, aunque espero atrapar al extraño Hello World , tendrían que migrar como está.

EDITAR

Para ser claro, quiero terminar con:

<div id="old-parent"></div>
<div id="new-parent">
<span>Foo</span>
<b>Bar</b>
Hello World
</div>

La respuesta a la pregunta a partir de la cual este es un duplicado propuesto daría como resultado:

<div id="new-parent">
<div id="old-parent">
<span>Foo</span>
<b>Bar</b>
Hello World
</div>
</div>

Answer 1

Aquí hay una función simple:

function setParent(el, newParent)
{
newParent.appendChild(el);
}

Los childNodes son los elementos que se newParent , newParent es el elemento el que se moverá, por lo que se ejecutará la función como:

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

Aquí está la demostración

Answer 2

Esta respuesta solo funciona realmente si no necesita hacer nada más que transferir el código interno (innerHTML) de uno a otro:

// 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 = '''';

¡Espero que esto ayude!

Answer 3

DEMO

Básicamente, desea recorrer cada descendiente directo del nodo padre anterior y moverlo al nuevo padre. Cualquier hijo de un descendiente directo se moverá con él.

var newParent = document.getElementById(''new-parent'');
var oldParent = document.getElementById(''old-parent'');
while (oldParent.childNodes.length > 0) {
newParent.appendChild(oldParent.childNodes[0]);
}