Скажем, у меня есть три <div>элемента на странице. Как я могу поменять местами первую и третью <div>? jQuery в порядке.

Тривиально с jQuery

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

Если вы хотите делать это неоднократно, вам нужно будет использовать разные селекторы, поскольку блоки div сохранят свои идентификаторы при перемещении.

$(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% в мире по состоянию на июль 2020 г.

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 имеет значение null, вставьте newChild в конец списка дочерних элементов. Если newChild является объектом DocumentFragment, все его дочерние элементы вставляются в том же порядке перед refChild. Если newChild уже есть в дереве, сначала он удаляется.

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

Извините за то, что натолкнулся на эту тему. Я наткнулся на проблему "подкачки DOM-элементов" и немного поигрался

Результатом является "родное" jQuery "решение", которое кажется действительно красивым (к сожалению, я не знаю, что происходит внутри jQuery при этом)

Код:

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

В документации jQuery сказано, что элемент insertAfter() перемещается, а не клонируется.