什么'；在div上排序div的最佳方法是什么？（在不带JQuery的javascript中）

我有以下资料：

<div id='a'>
   <div id='a1' />
   <div id='a2' />
   <div id='a3' />
   <div id='a4' />
   <div id='a5' />
</div>

假设按下一个按钮时，我需要像这样重新排列它：

<div id='a'>
   <div id='a2' />
   <div id='a4' />
   <div id='a3' />
   <div id='a1' />
   <div id='a5' />
</div>

或者类似的东西

现在,， 我知道怎么让a组的孩子们都来。 我知道如何对它们进行排序（无论我的算法是什么）

问题是什么是重新排列它们的最佳方式

我可以把它们都拿走。 然后按照正确的顺序一个接一个地读

这是可行的，但我认为这是错误的，因为每次添加新项目时都会出现回流

有人能帮忙吗？ 给我指一篇网络上的文章或写下一个解决方案

谢谢

使用/DOM方法重新排序

---

最好使用jQuery或其他javascript框架，这样你就不必自己做所有的脏活。

如果你有一个排序数组，你可以做两件事

var array = [ ... ]; // sorted array of elements
var len = array.length;

在追加元素之前分离父级，然后再追加父级。 这似乎是最快的选择（特别是对于大型收藏）

不幸的是，它会减慢你在Chrome中的代码速度。（在IE和FF中速度更快）

---

我想指出的是，除非您处理1000多个元素，否则差异不会被注意到。

不需要将它们全部删除，

insertBefore

和

appendChild

可以很好地移动东西。您不必先将它们从DOM中分离出来？@ThiefMaster:No。从文档中（我的答案中的链接）：“如果

新子项
已经在树中，它将首先被删除。”因此浏览器知道您正在移动它，并有望优化它的回流等等。@chacko：正如我在回答中所说，如果您不先删除它们，您至少为浏览器提供了足够的信息，使其能够优化回流。使用“删除然后重新插入”时，它没有该信息。在该功能运行时，浏览器是否会进行任何布局？我本以为它只会在页面完成后重新布局。。。？这只是我的想法，我不知道这是事实……是的，有一次我想提到一个
DocumentFragment
作为一个选项，但问题是，如果它们已经在DOM中，移除它们将产生影响，就像移动它们一样，因此没有真正的净收益。在构建DOM中还没有的东西时，使用片段当然很有用…@t.J.Crowder-你会想，但是在写整个段落之前，你做过任何测试吗？：）我发现IE 6-8的速度提高了30%，FF的速度提高了10%，Chrome的速度降低了9%。看来它确实有影响。。。但这并不一致@加拉姆巴拉兹：不错。请忽略我的更新，顺便说一句，我错过了您在删除根目录和不删除根目录的情况下测试片段的机会。@chacko-我认为在执行繁重的操作之前删除一个节点以避免回流已经足够标准了。：）建议添加一个正确删除和恢复父项的示例，例如：但我觉得编辑太大，无法继续进行。
var parent = root.parentNode;
var next   = root.nextSibling;
parent.removeChild(root);
for (var i = 0; i < len; i++) {
  root.appendChild(array[i]);
}
parent.insertBefore(root, next);

var fragment = document.createDocumentFragment();
for (var i = 0; i < len; i++) {
    fragment.appendChild(array[i]); // lighweight, off-DOM container
}
root.appendChild(fragment); // append to the DOM at once