Diciamo che ho tre <div>elementi su una pagina. Come posso scambiare le posizioni del primo e del terzo <div>? jQuery va bene.

Banale con jQuery

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

Se vuoi farlo ripetutamente, dovrai utilizzare selettori diversi poiché i div manterranno i loro ID mentre vengono spostati.

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

Non è necessario utilizzare una libreria per un'attività così banale:

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, first

Ciò tiene conto del fatto che getElementsByTagNamerestituisce un NodeList live che viene aggiornato automaticamente per riflettere l'ordine degli elementi nel DOM man mano che vengono manipolati.

Potresti anche usare:

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, first

e ci sono varie altre possibili permutazioni, se hai voglia di sperimentare:

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

per esempio :-)

.prima e dopo

Usa il moderno Vanilla JS! Molto meglio / più pulito di prima. Non c'è bisogno di fare riferimento a un genitore.

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

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

Supporto browser - 94,23% globale a partire da luglio '20

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

e usalo in questo modo:

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

se non vuoi usare jQuery puoi facilmente adattare la funzione.

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

Questa funzione può sembrare strana, ma si basa molto sugli standard per funzionare correttamente. In effetti, potrebbe sembrare che funzioni meglio della versione jQuery che tvanfosson ha pubblicato che sembra fare lo scambio solo due volte.

Su quali peculiarità degli standard si basa?

insertBefore Inserisce il nodo newChild prima del nodo figlio esistente refChild. Se refChild è nullo, inserisci newChild alla fine dell'elenco dei figli. Se newChild è un oggetto DocumentFragment, tutti i suoi figli vengono inseriti, nello stesso ordine, prima di refChild. Se il newChild è già nell'albero, viene prima rimosso.

L'approccio Jquery menzionato in alto funzionerà. Puoi anche usare JQuery e CSS. Ad esempio su Div uno hai applicato class1 e div2 hai applicato class class2 (ad esempio, ogni classe di CSS fornisce una posizione specifica sul browser), ora puoi scambiare le classi usando jquery o javascript (che cambierà la posizione)

Ci scusiamo per aver urtato questo thread, sono incappato nel problema dello "scambio di elementi DOM" e ho giocato un po '

Il risultato è una "soluzione" nativa di jQuery che sembra essere davvero carina (sfortunatamente non so cosa stia succedendo agli interni di jQuery quando lo faccio)

Il codice:

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

La documentazione di jQuery dice che insertAfter() sposta l'elemento e non lo clona