Можно ли поменять <li>элементов на replaceChild?

Question

У меня есть список <li> элементов:

<ul id="mylist">
  <li id="item1">Item 1</li>
  <li id="item2">Item 2</li>
  <li id="item3">Item 3</li>
</ul>

Могу ли я поменять два <li> элемента - скажем, item1 и item2 - на replaceChild, один из методов модификации дерева DOM? Будет ли это работать во всех браузерах?

Answer 1

Нет. replaceChild удалит один из DOM. Вы хотите insertBefore

var a = document.getElementById('item1');
var b = document.getElementById('item2');
a.parentNode.insertBefore(b, a);

Конечно, это поменяло бы их, только если они были рядом друг с другом.

Вы можете использовать replaceChild, если хотите поменять местами те, которые не были рядом друг с другом.

var a = document.getElementById('item1');
var b = document.getElementById('item3');
var after_b = b.nextSibling;
var p = a.parentNode;

p.replaceChild(b,a);

if (after_b) {
    p.replaceChild(a, after_b);
} else {
   p.appendChild(a);
} 

Answer 2

Woops, я не посмотрел достаточно внимательно на ваши теги. Если jQuery является опцией: вы можете использовать .insertBefore() для этого:

​$('#item2').insertBefore('#item1');​​​​​​​​​​​​​​​​​​​​

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