Cómo intercambiar nodos DOM secundarios en JavaScript?

Question

¿Cuál es la forma más fácil de cambiar el orden de los nodos secundarios?

Por ejemplo, quiero que childNode [3] sea childNode [4] y viceversa.

Answer 1

No es necesario clonar. Puede simplemente mover un nodo antes que el otro con esto:

childNode[4].parentNode.insertBefore(childNode[4], childNode[3]); 

Obtiene el elemento primario del nodo. A continuación, llama al método insertBefore en el elemento primario y le pasa el nodo childNode [4] y le indica que desea que se inserte antes de childNode [3]. Eso le dará el resultado de cambiar su orden, por lo que 4 será antes de las 3 cuando esté listo.

Referencia documentation on insertBefore.

Cualquier nodo que se inserta en el DOM que ya se encuentra en el DOM se elimina primero automáticamente y luego se inserta nuevamente para que no haya necesidad de eliminarlo primero.

Answer 2

La respuesta de jfriend00 realmente no intercambia elementos (solo "intercambia" elementos que están uno al lado del otro y solo debajo del mismo nodo padre). Esto está bien, ya que esta era la pregunta.

En este ejemplo se intercambia elementos mediante la clonación, pero independientemente de su posición y nivel de DOM:

// Note: Cloned copy of element1 will be returned to get a new reference back 
function exchangeElements(element1, element2) 
{ 
    var clonedElement1 = element1.cloneNode(true); 
    var clonedElement2 = element2.cloneNode(true); 

    element2.parentNode.replaceChild(clonedElement1, element2); 
    element1.parentNode.replaceChild(clonedElement2, element1); 

    return clonedElement1; 
} 

Editar: Añadido regreso de nuevo referencia (si se quiere mantener la referencia, por ejemplo, para acceder a atributo "parentNode "(de lo contrario, se pierde)). Ejemplo: e1 = elementos de cambio (e1, e2);

Answer 3

para un intercambio real de los nodos sin cloneNode:

<div id="d1">D1</div> 
    <div id="d2">D2</div> 
    <div id="d3">D3</div> 

Con la función SwapNode (utilizando PrototypeJS):

function SwapNode(N1, N2) { 
N1 = $(N1); 
N2 = $(N2); 

if (N1 && N2) { 
    var P1 = N1.parentNode; 
    var T1 = document.createElement("span");  
    P1.insertBefore(T1, N1); 

    var P2 = N2.parentNode; 
    var T2 = document.createElement("span"); 
    P2.insertBefore(T2, N2); 

    P1.insertBefore(N2, T1); 
    P2.insertBefore(N1, T2); 

    P1.removeChild(T1); 
    P2.removeChild(T2); 
} 
} 
SwapNode('d1', 'd2'); 
SwapNode('d2', 'd3'); 

producirá:

<div id="d3">D3</div> 
<div id="d1">D1</div> 
<div id="d2">D2</div> 

Answer 4

probar este método :

1. Get the parent element
2. tienda el two elements you want to swap

3. tienda el .nextSibling of the node that is last in order por ejemplo: [1,2,3,4] => queremos intercambiar 3 & 2 a continuación, almacenar nextSibling de 3, '4'.

4. .insertBefore (3,2);

5. .insertBefore (2, nextSibling);

Answer 5

Necesitaba una función para intercambiar dos nodos arbitrarios manteniendo los elementos intercambiados en el mismo lugar en el dom.Por ejemplo, si un estaba en la posición 2 con respecto a su matriz y b estaba en la posición 0 con respecto a su padre, b debería sustituir la posición 2 del un ex matriz 's y un debería reemplazar niño 0 de b 's anterior padre.

Esta es mi solución que permite que el intercambio se realice en partes completamente diferentes del dom. Tenga en cuenta que el intercambio no puede ser un simple intercambio de tres pasos. Cada uno de los dos elementos debe eliminarse del dom primero porque pueden tener hermanos que necesitarían actualización, etc.

Solución: coloqué dos divisores de soporte para mantener el lugar de cada nodo para mantener el orden relativo de hermanos. Luego reinserto cada uno de los nodos en el marcador de posición del otro, manteniendo la posición relativa que tenía el nodo intercambiado antes del intercambio. (Mi solución es similar a la de Buck).

función swapDom (a, b) {

var aParent = a.parentNode; 
var bParent = b.parentNode; 

var aHolder = document.createElement("div"); 
var bHolder = document.createElement("div"); 

aParent.replaceChild(aHolder,a); 
bParent.replaceChild(bHolder,b); 

aParent.replaceChild(b,aHolder); 
bParent.replaceChild(a,bHolder); 

}

Answer 6

Uso .before o .after!

Esto es vainilla JS!

childNode[3].before(childNode[4]); 

o

childNode[4].after(childNode[3]); 

Para mayor durabilidad de intercambio, tratar:

function swap(node1, node2) { 
    const afterNode2 = node2.nextElementSibling; 
    const parent = node2.parentNode; 
    node1.replaceWith(node2); 
    parent.insertBefore(node1, afterNode2); 
} 

esto debería funcionar, incluso si los padres no coinciden