Javascript 使用innerHTML反转锚定并插入锚定会给我文本

函数rvs（）{
var archors=document.getElementsByTagName（'a'）；
var archors=[…anchors].reverse（）；
document.getElementById（'x'）.innerHTML=anchors；
}

---

在您的评论中：

我以前在appendChild中使用过，但它占用了整个内存10秒，并冻结了浏览器以反转我的1000个元素。这就是为什么要同时插入它们的原因

要同时重新结束它们，可以使用文档片段：

function rvs(){
  // Using qSA to get a disconnected NodeList
  var anchors = document.querySelectorAll('a');
  var fragment = document.createDocumentFragment();
  for (const anchor of anchors) {
    fragment.insertBefore(anchor, fragment.firstChild);
  }
  target.appendChild(fragment);
}

var target=document.getElementById（'x'）；
函数createElements（）{
对于（设i=0；i<1000；++i）{
常量a=document.createElement（“a”）；
a、 href=`${i}`；
a、 textContent=`[${i}]`；
目标：儿童（a）；
}
}
函数rvs（）{
//使用qSA获取断开连接的节点列表
var-anchors=document.querySelectorAll（'a'）；
var fragment=document.createDocumentFragment（）；
用于（锚的常数锚）{
fragment.insertBefore（锚点，fragment.firstChild）；
}
target.appendChild（片段）；
}
createElements（）；
设置超时（（）=>{
控制台。时间（“反转”）；
rvs（）；
控制台。时间结束（“反转”）；
}, 0);
以下是一种CSS方法。这不是应该的答案，但我想我应该张贴它。你可以使用弹性盒


#x{
显示器：flex；
弯曲方向：行反向；
证明内容：柔性端；
}
关于@Hackinet answer，我提出了CSS唯一的解决方案，但这里的问题是，如果锚点有href，它就不起作用了，在这种情况下，我们可以编写一个简单的js方法，在
行
和
行反向
之间切换
flex direction
属性


标签{
显示：内联flex；
弯曲方向：行；
}
#逆转{
显示：无；
}
#反向：选中+标签{
弯曲方向：行反向；
}

1.
2.
3.
我之前使用了
for of
和
appendChild
但它占用了整个内存10秒，并冻结了浏览器以反转我的1000个元素。这就是为什么要同时插入它们的原因once@JoeDoe-在这种情况下，您需要将它们移动到文档片段中，然后附加该片段。或者，如果您想通过标记进行往返，请在每个锚点上使用
outerHTML
，以获取其标记（尽管会丢弃事件处理程序）。@JoeDoe-有兴趣了解上面的第二个解决方案（使用
insertBefore
）在您的1000元素场景中是如何比较的（不过可能不会更好）@JoeDoe-添加了一个使用文档片段执行1000个元素的示例。在我的工作站上的Chrome v73中，这个例子大约需要3毫秒。我能不能只获取元素的反向数组，然后将其转换为字符串，然后使用innerHTML进行转换，否则这将是最糟糕的情况？如果可以在这个问题的结构器上使用，那将是great@JoeDoe对于该问题，您已经使用flexbox获得了一个可接受的答案（）。所以我有点困惑你想要什么？您是否希望
元素与该问题中
元素的预期结果相同？是的，如果可以使用css完成，则不需要在question@ajaiJothi非常感谢。但是OP希望有一个CSS解决方案。