Angenommen, ich habe drei <div>Elemente auf einer Seite. Wie kann ich die Positionen des ersten und dritten tauschen <div>? jQuery ist in Ordnung.

Trivial mit jQuery

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

Wenn Sie dies wiederholt tun möchten, müssen Sie verschiedene Selektoren verwenden, da die Divs ihre IDs behalten, wenn sie verschoben werden.

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

Es ist nicht erforderlich, eine Bibliothek für eine so triviale Aufgabe zu verwenden:

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

Dies berücksichtigt die Tatsache, dass getElementsByTagNameeine Live-NodeList zurückgegeben wird, die automatisch aktualisiert wird, um die Reihenfolge der Elemente im DOM widerzuspiegeln, wenn sie bearbeitet werden.

Sie könnten auch verwenden:

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

und es gibt verschiedene andere mögliche Permutationen, wenn Sie experimentieren möchten:

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

zum Beispiel :-)

.vorher und nachher

Verwenden Sie moderne Vanille JS! Viel besser / sauberer als zuvor. Keine Notwendigkeit, einen Elternteil zu referenzieren.

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

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

Browser-Unterstützung - 94,23% global ab 20. Juli

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

und benutze es so:

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

Wenn Sie jQuery nicht verwenden möchten, können Sie die Funktion problemlos anpassen.

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

Diese Funktion mag seltsam erscheinen, stützt sich jedoch stark auf Standards, um ordnungsgemäß zu funktionieren. Tatsächlich scheint es besser zu funktionieren als die von tvanfosson veröffentlichte jQuery-Version, die den Tausch nur zweimal durchzuführen scheint.

Auf welche Besonderheiten stützt es sich?

insertBefore Fügt den Knoten newChild vor dem vorhandenen untergeordneten Knoten refChild ein. Wenn refChild null ist, fügen Sie newChild am Ende der Liste der untergeordneten Elemente ein. Wenn newChild ein DocumentFragment-Objekt ist, werden alle untergeordneten Objekte vor refChild in derselben Reihenfolge eingefügt. Wenn sich das neue Kind bereits im Baum befindet, wird es zuerst entfernt.

Der oben erwähnte Jquery-Ansatz funktioniert. Sie können auch JQuery und CSS verwenden. Sagen Sie beispielsweise, dass Sie auf Div 1 Klasse 1 und Div 2 Klasse 2 angewendet haben (z. B. für jede Klasse von CSS, die eine bestimmte Position im Browser bereitstellt). Jetzt können Sie die Klassen mit jquery oder austauschen Javascript (das wird die Position ändern)

Tut mir leid, dass ich diesen Thread gestoßen habe. Ich bin über das Problem "DOM-Elemente tauschen" gestolpert und habe ein bisschen herumgespielt

Das Ergebnis ist eine jQuery-native "Lösung", die wirklich hübsch zu sein scheint (leider weiß ich nicht, was dabei bei den jQuery-Interna passiert).

Der Code:

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

Die jQuery - Dokumentation sagt , dass insertAfter() bewegt sich das Element und nicht wahr Klon