Ответ 1

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

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

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

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

Ответ 2

Там нет необходимости использовать библиотеку для такой тривиальной задачи:

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

например :-)

Ответ 3

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, вы можете легко адаптировать эту функцию.

Ответ 4

.до и после

Используйте современный ванильный JS! Намного лучше/чище, чем раньше

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

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

Поддержка браузеров - 84% по всему миру, 87% по состоянию на март 18 года

Ответ 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);
};

Эта функция может показаться странной, но она сильно зависит от стандартов, чтобы нормально функционировать. На самом деле это может показаться более функциональным, чем версия jQuery, опубликованная tvanfosson, которая, кажется, выполняет обмен только дважды.

На каких стандартах он полагается?

InsertBefore     Вставляет node newChild перед существующим дочерним элементом node refChild. Если refChild имеет значение null, вставить newChild at конец списка детей.     Если newChild является объектом DocumentFragment, все его дочерние элементы вставлен в том же порядке до refChild. Если newChild уже в дереве сначала удаляется.

Ответ 6

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

Ответ 7

Извините, что столкнулся с этой нитью Я наткнулся на проблему "swap DOM-elements" и немного поиграл

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

Код:

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

Документация jQuery гласит, что insertAfter() перемещает элемент и не клонирует его