Javascript 如何颠倒无序列表中列表项的顺序

假设我有一个无序列表，如下所示：

<ul id="birds">
  <li>Bald Eagle</li>
  <li>Falcon</li>
  <li>Condor</li>
  <li>Albatross</li>
  <li>Parrot</li>
</ul>

秃鹰
猎鹰
秃鹰
信天翁
鹦鹉

使用纯JavaScript（不包括jQuery），我希望能够颠倒此列表的顺序-以便它匹配以下预期的“输出”：

鹦鹉
信天翁
秃鹰
猎鹰
秃鹰

这是我试图编写的JavaScript，试图实现这一目标：

var birdList = document.getElementById("birds").getElementsByTagName("li");
var birdListReverse = birdList.reverse();

for(var i = 0; i < birdList.length; i++)
{
  birdList[i] = birdListReverse[i];
}

var birdList=document.getElementById（“birds”）.getElementsByTagName（“li”）；
var birdListReverse=birdList.reverse（）；
对于（变量i=0；i

我认为，以某种方式将当前列表中的项目与“反向”列表中的项目过度书写是足够的，但并非如此。我是否需要以某种方式操纵列表中的每个

nodeValue

我希望在单击按钮时执行此操作-这是最简单的部分，只是获得了扭转列表的技术，这有点妨碍了我。

您可以这样做（在纯javascript中）。您只需按相反顺序循环使用

li

标记，并将它们附加到父项。这将产生颠倒顺序的自然效果。你得到最后一个，将它附加到列表的末尾，得到第二个到最后一个，将它附加到列表中。从第三个到最后一个，将其附加到列表的末尾，依此类推，所有项目都以相反的方式结束。注意，您可以对DOM中已经存在的内容使用appendChild，它将自动从当前位置移动（例如，在追加之前删除）

---

工作示例：

HTMLCollection只是节点的只读视图。为了操纵节点，必须使用各种DOM操纵方法之一。在你的情况下，正好有一条捷径；您所需要做的就是以相反的顺序附加子节点

var birds = document.getElementById("birds");
var i = birds.childNodes.length;
while (i--)
  birds.appendChild(birds.childNodes[i]);

---

编辑：发生的情况是，

appendChild

在追加节点之前将其从文档中删除。这有两个效果：a）它使您不必在按相反顺序追加节点之前复制节点列表并将其删除；b）它使节点的顺序颠倒，因为它将最后一个子列表和第一个子列表附加在一起。

操作

birdList

不会对元素重新排序，因为

birdList

只是一个集合-a，它独立于DOM本身

实际上，您需要获得对

元素的引用，然后使用and-可能的组合。

未测试，但请尝试：

var parent = document.getElementById("birds");
var birdList = parent.getElementsByTagName("li");

for(var i = birdList.length-1; i > 0; --i) {
    parent.appendChild(birdList[i];
}

var birds=document.getElementById（'birds'）；
对于（var i=0，bll=birds.childNodes.length；i

实际上不需要JavaScript。如果要在此处使用语义正确的

（ordered list）元素（因为排序对您来说显然很重要），那么可以使用

reversed

属性执行完全相同的操作，而不需要任何脚本依赖项！为了直观地颠倒项目的顺序，我们将在两行CSS中添加

flex direction

：

ol[反向]{
显示器：flex；
弯曲方向：柱反向；
}

秃鹰
猎鹰
秃鹰
信天翁
鹦鹉

const list=document.querySelector（“ul”）；
from（list.children.reverse（）.forEach（element=>list.appendChild（element））您也可以这样做。其工作原理如下：


抓取所有bird列表项（元素）并将其作为节点列表返回
将节点列表转换为数组并反转数组（因为数组中的项可以反转，但节点列表中的项不能反转）
将数组中的每个鸟类列表项追加到原始列表容器中（元素
）

代码：

您是否尝试过用相反的答案覆盖当前列表项？虽然其他答案对我有效，但这是最短、最容易编码的答案（并且有效）。谢谢你的建议：）。我试图在我的代码中“总结”我对这一点的理解，并给出这样的评论：“因此，从列表末尾向后操作，并将每个项目追加到列表中，反过来，会产生一种错觉，即列表中的每个值都被列表中的“相反”顺序“重写”（例如，从5个项目的列表中，项目1变为项目5，项目2变为项目4，项目3保持不变，项目4变为项目2，项目5变为项目1）。“这是因为”将节点newChild添加到此节点的子项列表的末尾。如果newChild已在树中，则首先将其删除。”。如果新子节点已在树中，则即使首先删除它。如果节点较多，则可能会删除（取决于浏览器）如果你指的是Neil使用childNodes，是的，我确实修改了我的答案，因为历史将为海报提供更简洁的替代方案。但我没有改变我最初的基本方法，即使用
insertBefore
@BrettZamir，我想
canon
这意味着他/她在经过一些编辑后提供的答案最终与您的答案相同，并且在注意到这一点的同时，
canon
选择删除他/她的答案。这与我的一次尝试非常相似，只是通过查看这一点，让parent.appendChild和parent.removeChild在连续语句中使我认为它们是错误的omehow相互抵消。当我测试此代码片段时，我只剩下一个列表项-原始列表中的“最后”项。您不需要删除子项，因为这会自动发生
var birds = document.getElementById("birds");
var i = birds.childNodes.length;
while (i--)
  birds.appendChild(birds.childNodes[i]);

var parent = document.getElementById("birds");
var birdList = parent.getElementsByTagName("li");

for(var i = birdList.length-1; i > 0; --i) {
    parent.appendChild(birdList[i];
}

var birds = document.getElementById('birds');

for(var i = 0, bll = birds.childNodes.length; i < bll; i++) {
  birds.insertBefore(birds.childNodes[i], birds.firstChild);
}

const birdsContainer = document.getElementById("birds");
const birdList = birds.getElementsByTagName("li");

[].slice.call(birdList)
  .reverse()
  .forEach(bird => birdsContainer.appendChild(bird));