Reverse order of a set of HTML elements

Question

I have a set of divs that looks like this:

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

But I want them to flip so that it looks like this:

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

So that when a new <div> is added it goes to the end of the list.

How can I do this (or is there a better way of doing this)?

_"So that when a div is added it will go to the end of the list...."_ - is your question how to reverse existing elements (some good answers for that below), or how to add new elements in a particular spot? Starting from your desired output, if you added a new `
6
` should it go below 1 or above 5? — nnnnnn, Oct 30 '11 at 23:03

score 22 · Answer 1 · edited Oct 17 '19 at 12:17

22

A vanilla JS solution:

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

edited Oct 17 '19 at 12:17

akinuri

10,690
10
65
102

answered Jun 16 '16 at 13:25

Ayman Abdel-Rahman

532
1
6
13

1

This [needs more jquery](https://needsmorejquery.com/) :) +1 for a vanilla version. – akinuri Oct 17 '19 at 12:26

Phrogz · Accepted Answer · 2011-10-30T13:14:42.837

19

Wrapped up as a nice jQuery function available on any set of selections:

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

Proof: http://jsfiddle.net/R4t4X/1/

Edit: fixed to support arbitrary jQuery selections

edited Oct 30 '11 at 13:14

answered Oct 30 '11 at 13:05

Phrogz

296,393
112
651
745

1

+1 easy to read, understand, maintain and change by any developer. – Michael Durrant Oct 30 '11 at 13:20
you saved my life !! Thanks – Arash Hatami Nov 27 '19 at 16:55

score 15 · Answer 3 · edited Nov 08 '18 at 02:30

I found all the above somehow unsatisfying. Here is a vanilla JS one-liner:

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

Snippet with explanations:

// Get the parent element.
const parent = document.getElementById('con');
// Shallow copy to array: get a `reverse` method.
const arr = Array.from(parent.childNodes);
// `reverse` works in place but conveniently returns the array for chaining.
arr.reverse();
// The experimental (as of 2018) `append` appends all its arguments in the order they are given. An already existing parent-child relationship (as in this case) is "overwritten", i.e. the node to append is cut from and re-inserted into the DOM.
parent.append(...arr);

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

Saxoier · Answer 4 · 2011-10-31T00:10:38.287

without a library:

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-style:

$.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();

jsPerf Test

Yes, also very hard for all to read and thus change and maintain when compared with solution below. — Michael Durrant, Oct 30 '11 at 13:19
@Phrogz and Michael Durrant: If you prefer more than two reflows than you can [this version](http://jsfiddle.net/akfHm/). — Saxoier, Oct 30 '11 at 13:26
@Saxoier is a better solution then accepted answer since it doesn't depend on jQuery, or more importantly cause reflow when dealing with large number of elements. — holmberd, May 19 '18 at 21:05

score 3 · Answer 5 · answered Oct 30 '11 at 01:38

3

One way:

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

answered Oct 30 '11 at 01:38

Shad

15,134
2
22
34

This is the one that worked for me because my parent div had other dynamically added child elements and I needed to match exact ones. – spcsLrg Mar 10 '21 at 14:17

score 0 · Answer 6 · answered Oct 30 '11 at 23:06

Another (simpler?) vanilla javascript response: http://jsfiddle.net/d9fNv/

var con = document.getElementById('con');
var els = Array.prototype.slice.call(con.childNodes);
for (var i = els.length -1; i>=0; i--) {
    con.appendChild(els[i]);
}

Alternatively, a shorter but less efficient method: http://jsfiddle.net/d9fNv/1/

var con = document.getElementById('con');
Array.prototype.slice.call(con.childNodes).reverse().forEach(function(el) {
    con.appendChild(el);
});

Reverse order of a set of HTML elements

6 Answers6

Linked