elemento en movimiento de JavaScript en el DOM

Question

Digamos que tengo tres elementos <div> en una página. ¿Cómo puedo intercambiar las posiciones del primer y tercer <div>? jQuery está bien.

Answer 1

Trivial con jQuery

$('#div1').insertAfter('#div3'); 
$('#div3').insertBefore('#div2'); 

Si usted quiere hacerlo en varias ocasiones, tendrá que utilizar diferentes selectores ya que los divs conservarán sus identificaciones, ya que se mueven alrededor.

$(function() { 
    setInterval(function() { 
     $('div:first').insertAfter($('div').eq(2)); 
     $('div').eq(1).insertBefore('div:first'); 
    }, 3000); 
}); 

Answer 2

jQuery.fn.swap = function(b){ 
    b = jQuery(b)[0]; 
    var a = this[0]; 
    var t = a.parentNode.insertBefore(document.createTextNode(''), a); 
    b.parentNode.insertBefore(a, b); 
    t.parentNode.insertBefore(b, t); 
    t.parentNode.removeChild(t); 
    return this; 
}; 

y utilizar de esta manera:

$('#div1').swap('#div2'); 

si no desea utilizar jQuery fácilmente se podría adaptar la función.

Answer 3

No hay necesidad de utilizar una biblioteca para una tarea tan trivial:

var divs = document.getElementsByTagName("div"); // order: first, second, third 
divs[2].parentNode.insertBefore(divs[2], divs[0]); // order: third, first, second 
divs[2].parentNode.insertBefore(divs[2], divs[1]); // order: third, second, third 

Esto tiene en cuenta el hecho de que getElementsByTagName devuelve un NodeList vivo que se actualiza automáticamente para reflejar el orden de los elementos en el DOM mientras son manipulados.

También es posible usar:

var divs = document.getElementsByTagName("div"); // order: first, second, third 
divs[0].parentNode.appendChild(divs[0]);   // order: second, third, first 
divs[1].parentNode.insertBefore(divs[0], divs[1]); // order: third, second, third 

y hay varias otras permutaciones posibles, si tienes ganas de experimentar:

divs[0].parentNode.appendChild(divs[0].parentNode.replaceChild(divs[2], divs[0])); 

por ejemplo :-)

Answer 4

enfoque mencionado en Jquery la parte superior funcionará También puede usar JQuery y CSS. Por ejemplo, en Div uno ha aplicado class1 y div2 ha aplicado class class2 (digamos por ejemplo, cada clase de css proporciona una posición específica en el navegador), ahora puede intercambiar las clases use jquery o Javascript (que va a cambiar la posición)

Answer 5

var swap = function() { 
    var divs = document.getElementsByTagName('div'); 
    var div1 = divs[0]; 
    var div2 = divs[1]; 
    var div3 = divs[2]; 

    div3.parentNode.insertBefore(div1, div3); 
    div1.parentNode.insertBefore(div3, div2); 
}; 

Esta función puede parecer extraño, pero en gran medida se basa en estándares con el fin de funcionar correctamente. De hecho, puede funcionar mejor que the jQuery version that tvanfosson posted, lo que parece hacer el intercambio solo dos veces.

¿En qué normas se basa?

insertarAntes Inserta el nodo newChild antes del nodo secundario existente refChild. Si refChild es nulo, inserte newChild en al final de la lista de elementos secundarios. Si newChild es un objeto DocumentFragment, todos sus elementos secundarios están insertados, en el mismo orden, antes de refChild. Si newChild ya es en el árbol, primero se elimina.

Answer 6

Lo siento por chocar este hilo Tropecé con el problema de "intercambio de DOM-elementos" y jugado un poco un poco

El resultado es una "solución" jQuery nativo que parece ser muy bonito (por desgracia, no sé qué está sucediendo en las partes internas de jQuery cuando se hace esto)

El Código:

$('#element1').insertAfter($('#element2')); 

La documentación de jQuery dice t sombrero insertAfter()mueve el elemento y no clonarlo

Answer 7

.before y .after

Uso JS vainilla moderna! Mucho mejor/más limpio que antes

const div1 = document.getElementById("div1"); 
const div2 = document.getElementById("div2"); 
const div3 = document.getElementById("div3"); 

div2.after(div1); 
div2.before(div3); 

Browser Support - 84% global, el 87% de los EE.UU. como Mar '18