Javascript 一组HTML元素的相反顺序

我有一组div，看起来像这样：

<div id="con">
    <div> 1 </div>
    <div> 2 </div>
    <div> 3 </div>
    <div> 4 </div>
    <div> 5 </div>
</div>

<div> 5 </div>
<div> 4 </div>
<div> 3 </div>
<div> 2 </div>
<div> 1 </div>

1.
2.
3.
4.
5.

但我想让它们翻转，这样看起来像这样：

<div id="con">
    <div> 1 </div>
    <div> 2 </div>
    <div> 3 </div>
    <div> 4 </div>
    <div> 5 </div>
</div>

<div> 5 </div>
<div> 4 </div>
<div> 3 </div>
<div> 2 </div>
<div> 1 </div>

5
4.
3.
2.
1.

因此，当添加新的

时，它会进入列表的末尾

我如何才能做到这一点（或者有更好的方法吗）？

一种方法：

function flip(){
 var l=$('#con > div').length,i=1;
 while(i<l){
   $('#con > div').filter(':eq(' + i + ')').prependTo($('#con'));
   i++;
 }
}

函数翻转（）{
var l=$（'#con>div'）。长度，i=1；
而（i无库：

function reverseChildNodes(node) {
    var parentNode = node.parentNode, nextSibling = node.nextSibling,
        frag = node.ownerDocument.createDocumentFragment();
    parentNode.removeChild(node);
    while(node.lastChild)
        frag.appendChild(node.lastChild);
    node.appendChild(frag);
    parentNode.insertBefore(node, nextSibling);
    return node;
}

reverseChildNodes(document.getElementById('con'));

jQuery风格：

$.fn.reverseChildNodes = (function() {
    function reverseChildNodes(node) {
        var parentNode = node.parentNode, nextSibling = node.nextSibling,
            frag = node.ownerDocument.createDocumentFragment();
        parentNode.removeChild(node);
        while(node.lastChild)
            frag.appendChild(node.lastChild);
        node.appendChild(frag);
        parentNode.insertBefore(node, nextSibling);
        return node;
    };
    return function() {
        this.each(function() {
            reverseChildNodes(this);
        });
        return this;
    };
})();

$('#con').reverseChildNodes();

包装成一个漂亮的jQuery函数，可用于任何选择集：

$.fn.reverseChildren = function() {
  return this.each(function(){
    var $this = $(this);
    $this.children().each(function(){ $this.prepend(this) });
  });
};
$('#con').reverseChildren();

证明：

编辑：修复了支持任意jQuery选择的问题
另一个（更简单？）普通javascript响应：

或者，一种较短但效率较低的方法：

一个普通的JS解决方案：

function reverseChildren(parent) {
    for (var i = 1; i < parent.childNodes.length; i++){
        parent.insertBefore(parent.childNodes[i], parent.firstChild);
    }
}

函数反转子对象（父对象）{
对于（var i=1；i
我发现上述所有内容都不太令人满意。下面是一个香草JS one liner：

parent.append(...Array.from(parent.childNodes).reverse());  

带说明的片段：


//获取父元素。
const parent=document.getElementById（'con'）；
//浅拷贝到数组：获取“反向”方法。
const arr=Array.from（parent.childNodes）；
//`reverse`可以在适当的位置工作，但可以方便地返回数组进行链接。
反向排列（）；
//实验性的（从2018年起）`append`按照给定的顺序追加所有参数。已经存在的父子关系（如本例）被“覆盖”，即要追加的节点被从DOM中剪切并重新插入DOM。
parent.append（…arr）；

1.
2.
3.
4.
5.
早在2011年，当这个问题被问到时，Flexbox已经存在了1-2年，支持不是很好，但现在是2020年，事情已经有了很大的改进，所以你可以只使用CSS就可以做到这一点

您可以尝试使用Flexbox的：


ul{
显示器：flex；
弯曲方向：柱反向；
}

一,
二,
三,
四,
五,
是的，与下面的解决方案相比，所有人都很难阅读，因此很难进行更改和维护。@Phrogz和Michael Durrant：如果你喜欢两个以上的回流，那么你可以。@Saxoier是一个更好的解决方案，因为它不依赖于jQuery，或者更重要的是，在处理大量元素时会导致回流ts.+1易于任何开发人员阅读、理解、维护和更改。您救了我的命！！谢谢“这样当添加div时，它将进入列表的末尾…”-您的问题是如何反转现有元素（下面有一些很好的答案），或如何在特定位置添加新元素？从所需输出开始，如果添加了新的
6
，它应该低于1还是高于5？此：）+1表示普通版本。我认为将这个答案简化为flexbox选择器可能会更好。你的普通谷歌搜索者会被这个问题弄得不知所措。是的，你可能是对的。我简化了这个答案，并添加了一个指向另一个答案的链接，以获得更复杂的示例。谢谢你的提示！这是一个有效的答案因为我的父div有其他动态添加的子元素，所以我需要匹配精确的子元素。