JavaScript перемещение элемента в DOM

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

7 78
javascript jquery dom

7 ответов:

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

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

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

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

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

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, third

это учитывает тот факт, что getElementsByTagName возвращает живой список узлов, который автоматически обновляется, чтобы отразить порядок элементов в 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, third

и есть различные другие возможные перестановки, если вы хотите экспериментировать:

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

например :-)

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

9

.до и после .после

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

4

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

0

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

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

Код:

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

в документации jQuery говорится, что insertAfter()движется элемент и не клонирует его

0