JavaScript движущийся элемент в DOM

Question

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

Answer 1

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

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

например: -)

Answer 2

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

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

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

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

Answer 3

.before и .after

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

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

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

Поддержка браузеров - 90% глобальный по состоянию на июнь '19

Answer 4

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

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

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

На какие особенности стандартов он опирается?

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

Answer 6

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

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

Код:

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

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

Answer 7

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