JavaScript beweglichen Element im DOM

Question

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

Answer 1

Trivial mit jQuery

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

Wenn Sie wollen, dass es immer wieder tun, müssen Sie verschiedene Selektoren verwenden, da die divs ihre ids behalten, wie sie um bewegt werden.

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

und es wie folgt verwendet werden:

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

, wenn Sie nicht wollen, jQuery verwenden Sie die Funktion leicht anpassen können.

Answer 3

Es gibt keine Notwendigkeit, eine Bibliothek für eine solche 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, third 

Dies berücksichtigt die Tatsache, dass getElementsByTagName eine Live NodeList zurückgibt, die automatisch aktualisiert wird, um die Reihenfolge der Elemente im DOM zu reflektieren wie sie manipuliert 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, third 

und es gibt verschiedene andere mögliche Permutationen, wenn Sie wie das Experimentieren fühlen:

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

zum Beispiel :-)

Answer 4

JQuery Ansatz erwähnt auf das Oberteil wird funktionieren. Sie können auch JQuery und CSS .Say für zB Div 1 verwenden Sie Klasse1 und Div2 angewendet haben Klasse Klasse2 angewendet haben (sagen Sie für zB jede Klasse von CSS bietet eine bestimmte Position im Browser), jetzt können Sie die Klassen verwenden jquery vertauschen oder Javascript (das wird die Position ändern)

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

Diese Funktion mag seltsam erscheinen, aber es stützt sich stark auf Standards, um richtig zu funktionieren. In der Tat scheint es, als ob es besser funktioniert als the jQuery version that tvanfosson posted, die den Swap nur zweimal zu tun scheint.

Auf welche Standardspezifitäten verlässt man sich?

insertBefore Fügt den Knoten newChild vor dem vorhandenen untergeordneten Knoten refChild ein. Wenn refChild null ist, fügen Sie newChild um das Ende der Liste der untergeordneten Elemente ein. Wenn newChild ein DocumentFragment-Objekt ist, werden alle untergeordneten Elemente in der gleichen Reihenfolge eingefügt, bevor refChild. Wenn das newChild in der Struktur bereits ist, wird es zuerst entfernt.

Answer 6

Sorry für Bumping dieses Themas ich über das „Swap-DOM-Elemente“ Problem gestolpert und spielte ein wenig herum

Das Ergebnis ist eine jQuery-native „Lösung“, die wirklich hübsch zu sein scheint (leider weiß ich nicht an den jQuery-Interna, was geschieht, wenn diese

tun) Der Code:

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

Die jQuery-Dokumentation sagt t Hut insertAfter()bewegt das Element und es nicht

Answer 7

.before und .after

Verwendung moderner Vanille JS klonen! Viel besser/sauberer als vorher

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, 87% der US-wie von Mar '18