¿Cómo mover todos los elementos secundarios HTML a otro padre usando JavaScript?

80

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 (tanto elementos como nodos de texto) de old-parenta new-parentsin jQuery?

No me importa el espacio en blanco entre los nodos, aunque espero atrapar a los extraviados Hello World, también tendrían que migrarlos como están.

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 de la que se trata de un duplicado propuesto resultaría en:

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

javascript html dom-manipulation

— Dibujó Noakes
fuente

2

posible duplicado de "Cortar y pegar" - mover nodos en el DOM con Javascript

— Marc B

6

@MarcB, esto no es un duplicado. La pregunta a la que enlaza no trata de mover a todos los niños, ni ninguna respuesta a esa pregunta aborda mi necesidad de mover diferentes tipos de nodos HTML (como nodos de texto).

— Drew Noakes

2

la respuesta es exactamente lo que necesita. dom es un árbol. mueve un nodo, todos los hijos de ese nodo se mueven con él.

— Marc B

@MarcB a veces no desea que el objeto principal en el destino. Considere, por ejemplo, mover todos los elementos de una lista TODO de los elementos principales 'pendientes' a 'completos'.

— Drew Noakes

124

MANIFESTACIÓN

Básicamente, desea recorrer cada descendiente directo del nodo padre antiguo 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]);
}

— Persona especial
fuente

8

Para ser realmente eficiente: while (oldParent.childNodes.length) { newParent.appendChild(oldParent.firstChild); }

— Gibolt

4

Tenga en cuenta que childNodes [] normalmente también contiene nodos de texto vacíos (uno por cada salto de línea en el código fuente).

— Dercsár

5

@Gibolt Creé una prueba JSPerf y parece indicarme que el acceso a la matriz es más rápido que llamar firstChild. La diferencia es insignificante en el mejor de los casos. Probablemente también variará de un navegador a otro. Sin firstChildembargo, creo que es más legible.

— aplastar

17

while (oldParent.hasChildNodes()) newParent.appendChild(oldParent.firstChild);y while (oldParent.firstChild) newParent.appendChild(oldParent.firstChild);trabaja 2 veces más rápido en Chromium y de 6 a 10 veces más rápido en Firefox. Su JSPerf modificado

— usuario

2

Puede ser beneficioso utilizar DocumentFragment developer.mozilla.org/en-US/docs/Web/API/DocumentFragment y mover todos los elementos a la vez si lo que busca es rendimiento.

— Íhor Mé

9

Manera moderna:

newParent.append(...oldParent.childNodes);

.appendes el reemplazo de .appendChild. La principal diferencia es que acepta varios nodos a la vez e incluso cadenas simples, como.append('hello!')
oldParent.childNodeses iterable, por lo que puede extenderse ...para convertirse en múltiples parámetros de.append()

Tablas de compatibilidad de ambos (en resumen: Edge 17+, Safari 10+):

— fregante
fuente

Parece muy elegante. Me pregunto si hay una diferencia de rendimiento con las otras respuestas aquí.

— Drew Noakes

Si lo hay, debe ser mínimo. En todo caso, es más rápido porque es una sola append llamada en lugar de muchas.

— fregante

Tenga cuidado: no para IE11 (nunca, probablemente)

— Rene van der Lende

Bien, pero hice algunas pruebas simples y while()todavía es un poco más rápido en Chrome. No tome mi palabra y realice sus propias pruebas si es posible.

— lepe

8

Aquí tienes una función simple:

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

el's childNodesson los elementos que se moverán, newParent es el elemento al elque se moverá, por lo que ejecutaría 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

— Cilan
fuente

¿Cómo usarías esto con su código? Esto también movería el old-parentelemento si lo pasara como el.

— aplastar el

1

Eso representaría HTML:<div id="new-parent"><div id="old-parent">...</div></div>

— aplastar el

1

Eso tampoco funcionará porque a medida que mueve al niño, la longitud cambia. Entonces, terminarás moviendo solo la mitad de los nodos. Necesita iterar hacia atrás o usar un ciclo while como lo hice yo.

— aplastar el

Todavía no funcionará. Necesita hacer: for (var i = l; i >= 0; i--)o while (document.getElementById('old-parent').length > 0). Además, su demostración tiene errores.

— aplastar el

@crush mira editar, sry -

while (document.getElementById('old-parent').length > 0) {     setParent(document.getElementById('old-parent')[i], document.getElementById('new-parent')); }

— Cilan

0

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!

— ItsJonQ
fuente

1

Esto funciona, aunque realmente no quiero serializar / deserializar a través de cadenas HTML. Aunque funciona :)

— Drew Noakes

11

No copiará ninguno de los objetos y eventos adjuntos a los elementos

— Gregory Magarshak

4

Este DOM regenerado, no mueve nodos / eventos existentes y probablemente es mucho más lento que un bucle en todos los niños

— Jordan

Ejecuté algunas pruebas simples y este método aún es más lento que la respuesta aceptada, y tiene desventajas como ya se explicó.

— lepe

-1

Si no lo usa -en los nombres de identificación, puede hacer esto

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>

Expandir fragmento

— Kamil Kiełczewski
fuente