Как заменить дочерние узлы DOM в JavaScript?

Question

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

Например, я хочу, чтобы childNode [3] был childNode [4] и наоборот.

Answer 1

Нет необходимости в клонировании.Вы можете просто переместить один узел перед другим с помощью этого:

childNode[4].parentNode.insertBefore(childNode[4], childNode[3]);

Вы получаете родительского узла.Затем вы вызываете метод insertBefore для родительского элемента и передаете ему узел childNode [4] и говорите, что хотите вставить его до childNode [3].Это даст вам результат замены их порядка, так что 4 будет раньше 3. Когда это будет сделано.

Ссылка документация на insertBefore .

Любой узел, который вставлен вDOM, который уже находится в DOM, сначала автоматически удаляется, а затем вставляется обратно, поэтому нет необходимости сначала удалять его вручную.

Answer 2

Ответ от jfriend00 на самом деле не меняет местами элементы (он «меняет местами» только те элементы, которые находятся рядом друг с другом и только под одним родительским узлом). Это нормально, так как это был вопрос.

Этот пример меняет местами элементы, клонируя их, но независимо от их положения и уровня DOM:

// Note: Cloned copy of element1 will be returned to get a new reference back
function exchangeElements(element1, element2)
{
    var clonedElement1 = element1.cloneNode(true);
    var clonedElement2 = element2.cloneNode(true);

    element2.parentNode.replaceChild(clonedElement1, element2);
    element1.parentNode.replaceChild(clonedElement2, element1);

    return clonedElement1;
}

Редактировать: добавлен возврат новой ссылки (если вы хотите сохранить ссылку, например, для доступа к атрибуту parentNode (в противном случае он теряется)). Пример: e1 = exchangeElements (e1, e2);

Answer 3

Используйте .before или .after!

Это ванильный JS!

childNode[3].before(childNode[4]);

или

childNode[4].after(childNode[3]);

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

function swap(node1, node2) {
    const afterNode2 = node2.nextElementSibling;
    const parent = node2.parentNode;
    node1.replaceWith(node2);
    parent.insertBefore(node1, afterNode2);
}

Это должно работать, даже если родители не соответствуют

Могу ли я использовать - 86% ноябрь 2018

Answer 4

Для реального обмена любых узлов без cloneNode:

    <div id="d1">D1</div>
    <div id="d2">D2</div>
    <div id="d3">D3</div>

С функцией SwapNode (используя PrototypeJS):

function SwapNode(N1, N2)  {
N1 = $(N1);
N2 = $(N2);

if (N1 && N2) {
    var P1 = N1.parentNode;
    var T1 = document.createElement("span");    
    P1.insertBefore(T1, N1);

    var P2 = N2.parentNode;
    var T2 = document.createElement("span");
    P2.insertBefore(T2, N2);

    P1.insertBefore(N2, T1);
    P2.insertBefore(N1, T2);

    P1.removeChild(T1);
    P2.removeChild(T2);
}
}
SwapNode('d1', 'd2');
SwapNode('d2', 'd3');

Будет производить:

<div id="d3">D3</div>
<div id="d1">D1</div>
<div id="d2">D2</div>

Answer 5

Мне нужна была функция, чтобы поменять местами два произвольных узла, сохраняя замененные элементы в одном месте в DOM. Например, если a находился в положении 2 относительно своего родителя, а b находился в положении 0 относительно своего родителя, b должен заменить позицию 2 из * 1007 Бывший родитель * a и a должны заменить дочернего 0 от прежнего родителя b .

Это мое решение, которое позволяет свопу находиться в совершенно разных частях дома. Обратите внимание, что обмен не может быть простым трехступенчатым обменом. Каждый из этих двух элементов должен быть сначала удален из DOM, потому что они могут иметь братьев и сестер, которые нуждаются в обновлении, и т. Д.

Решение: я вставил два div-элемента, чтобы удерживать место каждого узла, чтобы поддерживать относительный порядок родства. Затем я заново вставляю каждый из узлов в заполнитель другого, сохраняя относительное положение, которое было у обменного узла до обмена. (Мое решение похоже на решение Бака).

function swapDom(a,b) 
{
     var aParent = a.parentNode;
     var bParent = b.parentNode;

     var aHolder = document.createElement("div");
     var bHolder = document.createElement("div");

     aParent.replaceChild(aHolder,a);
     bParent.replaceChild(bHolder,b);

     aParent.replaceChild(b,aHolder);
     bParent.replaceChild(a,bHolder);    
}

Answer 6

Попробуйте этот метод:

1. Get the parent element
2. Сохраните two elements you want to swap

3. Сохраните .nextSibling of the node that is last in order например: [1,2, 3,4] => мы хотим поменять местами 3 и 2, а затем сохранить nextSibling 3, '4'.

4. .insertBefore (3,2);

5. .insertBefore (2, nextSibling);