Ответ 1

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

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

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

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

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

Ответ 2

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

Этот пример свопирует элементы, клонируя его, но независимо от их положения и уровня 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);

Ответ 3

Для реальной замены любых узлов без 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>

Ответ 4

Используйте .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);
}

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

Ответ 5

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

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

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

• .insertBefore(3,2);

• .insertBefore(2, NextSibling);

Ответ 6

Мне нужна была функция для обмена двумя произвольными узлами, поддерживающими замененные элементы в одном и том же месте в dom. Например, если a находилось в позиции 2 относительно своего родителя, а b находилось в позиции 0 относительно своего родителя, b должно заменить позицию 2 прежнего родителя, а a должно заменить ребенка 0 из прежнего родителя.

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

Решение. Я положил два держателя div, чтобы удерживать место каждого node, чтобы сохранить относительный порядок брата. Затем я повторно вставляю каждый из узлов в другой placeholder, сохраняя относительное положение, которое swapped node было перед свопом. (Мое решение похоже на Buck's).

Функция 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);

}