Скажімо, у мене є три <div>елементи на сторінці. Як я можу поміняти місцями позиції першого та третього <div>? jQuery чудово.

Тривіальний з jQuery

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

Якщо ви хочете робити це неодноразово, вам потрібно буде використовувати різні селектори, оскільки диви зберігатимуть свої ідентифікатори під час їх переміщення.

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

Не потрібно використовувати бібліотеку для такого тривіального завдання:

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

При цьому враховується той факт, що getElementsByTagNameповертає живий NodeList, який автоматично оновлюється, щоб відображати порядок елементів у DOM під час їх маніпулювання.

Ви також можете використовувати:

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

і існують різні інші можливі перестановки, якщо ви хочете експериментувати:

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

наприклад :-)

.до і після

Використовуйте сучасний ванільний JS! Шлях краще / чистіше, ніж раніше. Не потрібно посилатися на батьків.

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

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

Підтримка браузера - 94,23% глобально станом на липень 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; 
};

і використовувати його так:

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

якщо ви не хочете використовувати jQuery, ви можете легко адаптувати функцію.

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

Ця функція може здатися дивною, але вона сильно покладається на стандарти, щоб правильно функціонувати. Насправді, може здатися, що він працює краще, ніж версія jQuery, яку опублікував tvanfosson, яка, схоже, робить своп лише двічі.

На які особливості стандарту вона покладається?

insertBefore Вставляє вузол newChild перед існуючим дочірнім вузлом refChild. Якщо refChild є нульовим, вставте newChild в кінці списку дітей. Якщо newChild є об'єктом DocumentFragment, всі його дочірні програми вставляються в тому ж порядку перед refChild. Якщо newChild вже в дереві, його спочатку видаляють.

Підхід Jquery, згаданий вгорі, спрацює. Ви також можете використовувати JQuery та CSS. Скажімо, наприклад, на Div один ви застосували class1 та div2, ви застосували class class2 (скажімо, наприклад, що кожен клас css надає певну позицію в браузері), тепер ви можете обмінятись класами, використовуючи jquery або javascript (це змінить позицію)

Вибачте за те, що натрапив на цю тему, я натрапив на проблему "підміняти DOM-елементи" і трохи пограв

Результат - це "вирішення", яке є рідним jQuery, яке, здається, є дуже гарним (на жаль, я не знаю, що відбувається з внутрішніми jQuery при цьому)

Код:

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

Документація jQuery говорить, що insertAfter() переміщує елемент і не клонує його