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）与一个DOM树修改方法replaceChild交换吗？它适用于所有浏览器吗？

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

You can play with it here，这将移动而非复制元素，从而导致交换。

可以用replaceChild交换<li>元素吗？</li>

2 个答案: