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

【问题标题】：Swapping <li> elements with replaceChild possible?可以用 replaceChild 交换 <li> 元素吗？
【发布时间】：2010-04-23 21:24:17
【问题描述】：

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

【问题讨论】：

标签： javascript html dom

【解决方案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);
}

【讨论】：

【解决方案2】：

糟糕，我没仔细看你的标签。如果 jQuery 是一个选项：您可以为此使用 .insertBefore()：

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

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

【讨论】：

那是 jQuery 吗？有很多库可以将所有内容都关闭一个名为 $ 的变量。叹息。
@David - 是的，你是对的，更新了，我在想.replaceWith()，甚至没有看标签：api.jquery.com/replaceWith 感谢您指出！
@David Dorward：但唯一真正重要的是 jQuery。 :-p
由于我提出问题的方式，我不得不接受大卫的回答。毕竟，我问过如何使用 DOM 树修改方法来做到这一点。但是，jQuery one-liner 绝对是适合我的方式。谢谢！