Powiedzmy, że mam trzy <div>elementy na stronie. Jak mogę zamienić miejscami pierwszą i trzecią <div>? jQuery jest w porządku.

Trivial z jQuery

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

Jeśli chcesz to robić wielokrotnie, musisz użyć różnych selektorów, ponieważ elementy div zachowają swoje identyfikatory podczas przenoszenia.

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

Nie ma potrzeby używania biblioteki do tak banalnego zadania:

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

Uwzględnia to fakt, że getElementsByTagNamezwraca aktywną listę NodeList, która jest automatycznie aktualizowana w celu odzwierciedlenia kolejności elementów w DOM, gdy są one manipulowane.

Możesz również użyć:

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

i istnieje wiele innych możliwych permutacji, jeśli masz ochotę poeksperymentować:

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

na przykład :-)

.przed i po

Użyj nowoczesnego waniliowego JS! O wiele lepszy / czystszy niż poprzednio. Nie ma potrzeby odwoływania się do rodzica.

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

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

Obsługa przeglądarek - 94,23% globalnie, stan na lipiec 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; 
};

i użyj go w ten sposób:

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

jeśli nie chcesz używać jQuery, możesz łatwo dostosować tę funkcję.

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

Ta funkcja może wydawać się dziwna, ale w celu prawidłowego działania w dużym stopniu opiera się na standardach. W rzeczywistości może się wydawać, że działa lepiej niż wersja jQuery opublikowana przez tvanfosson, która wydaje się wykonywać wymianę tylko dwa razy.

Na jakich szczególnych normach się opiera?

insertBefore Wstawia węzeł newChild przed istniejącym węzłem podrzędnym refChild. Jeśli refChild ma wartość null, wstaw newChild na końcu listy dzieci. Jeśli newChild jest obiektem DocumentFragment, wszystkie jego elementy podrzędne są wstawiane w tej samej kolejności przed refChild. Jeśli noweDziecko jest już w drzewie, jest najpierw usuwane.

Podejście jquery wymienione na górze zadziała. Możesz również użyć JQuery i CSS. Powiedzmy, że np. W Div 1 zastosowałeś class1 i div2 zastosowałeś klasę class2 (powiedzmy, że każda klasa css zapewnia określoną pozycję w przeglądarce), teraz możesz zamienić klasy, używając jquery lub javascript (który zmieni pozycję)

Przepraszam za trafienie w ten wątek, natknąłem się na problem "zamiany elementów DOM" i trochę się pobawiłem

Rezultatem jest "rozwiązanie" natywne dla jQuery, które wydaje się być naprawdę ładne (niestety nie wiem, co się dzieje z wewnętrznymi elementami jQuery podczas robienia tego)

Kod:

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

Dokumentacja jQuery mówi, że insertAfter() przenosi element i nie klonuje go