Javascript 颠倒所有元素的顺序

我试过使用

CSS:

及

Javascript:

var reversed = document.getElementsByTagName('span').reverse();
document.getElementsByTagName('div').innerHTML = reversed;

在div中反转跨度的顺序，同时使其保持内联但不起作用

1. 2. 3. 4. 5. 6. 7. 8. 9 10 您可以在此处使用flex direction:row reverse以及justify content将项目向左对齐，而不是向右对齐，这将在使用row reverse作为值时发生

div{ 显示器：flex； 弯曲方向：行反向； 证明内容：柔性端； } 1. 2. 3. 4. 5. 6. 7. 8. 9 10

---

您可以通过以下步骤执行此操作：

使用querySelectorAll获取所有元素 使用扩展运算符将querySelectorAll的结果转换为数组 在上面使用Array.prototype.reverse 使用querySelector获取并使用appendChild而不是innerHTML 让div=document.querySelector'div' 让span=[…document.queryselectoral'span'].reverse.forEachelm=>{ 儿童部； } div{ 显示器：flex； } 1. 2. 3. 4. 5. 6. 7. 8. 9 10 您可以使用flex-direction:row-reverse和justify-content:flex-end

div{ 显示器：flex； 弹性：1； 证明内容：柔性端； 弯曲方向：行反向； } 1. 2. 3. 4. 5. 6. 7. 8. 9 10 使用列反转，可以有效地将它们转换为块元素，因此在改变顺序的同时，它也会将跨度元素一个置于另一个之下

我建议改为尝试行反转-这将使它们全部内联，同时提供您想要的顺序。然后使用justify-content:flex-end，以确保它保持在页面的左侧；如下图所示：

div{ 显示器：flex； 弯曲方向：行反向； 证明内容：柔性端； } 1. 2. 3. 4. 5. 6. 7. 8. 9 10

---

这实际上是一个与下面每个人都回答的问题不同的问题——因此，基于你原来的问题，你有多个答案，毫无意义。在提交之前，请确保您的问题准确无误，并且完全符合您的要求。突然将您的问题更改为不使用flex是没有多大用处的。人们已经回答了你的问题。在他们的回答中，让它看起来像引导或使用网格系统，这超出了你的问题范围，当被问到这个问题时，问题应该回复到这个问题。这个问题认为功能不会改变，但后来我发现了差异，所以不得不用实际的代码来修复它。很抱歉confusion@JoeDoe使用JS添加了一个方法。是否有一个方法可以使用javascript进行大规模实现，而不是针对多个跨度逐个追加1000跨距的速度？

var reversed = document.getElementsByTagName('span').reverse();
document.getElementsByTagName('div').innerHTML = reversed;