Reverse order of divs in pure plain JavaScript no CSS

Question

I can't find a post on here that is not jQuery based I need a plain JavaScript example and please don't suggest anything CSS solution related. I am aware that there is CSS methods to do things similar to this but for personal reasons I need a JavaScript solution for this instead.

Ok I need to make all the .x class names div's to be in reverse order so it will look like this

D
C
B
A

At default it looks like this

A
B
C
D

and I want the scroll box of the scroll bar on page load to start at the bottom with the reverse order of the .x div's like this photo shop image I created.

Here is my code currently

/*???*/

#a{
  background-color: gold;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
  color: red;
}

#b{
  background-color: orange;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.x{
  background-color: blue;
  display: block;
  height: 200px;
  width: 100%;
 position: relative;
  border: 2px solid white;
}

<div id='a'>
  <div id='b'>
    
    <div class='x'>
      <h1>A</h1>
    </div><!--</x>-->
    <div class='x'>
      <h1>B</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>C</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>D</h1>
    </div><!--</x>-->
    
  </div><!--</b>-->
</div><!--</a>-->

Answer 1

Pure javascript solution to reverse the divs

var divElems = document.getElementsByClassName('x');
var divB = document.getElementById('b');

var output = [];
for(var i =divElems.length - 1; i >= 0;i--){
  output.push(divElems[i]);
}

b.innerHTML = '';
output.forEach(function(eachDiv){
    b.appendChild(eachDiv);
});

Working demo - https://jsfiddle.net/71kpLqne/

Answer 2

You can firstly get all the divs using document.querySelectorAll('.x');

Then reverse this order using .reverse(). Then you can turn this array of DOM elements into a string of 'string' DOM elements using .reduce():

const divs = [...document.querySelectorAll('.x')];
const new_order = divs.reverse().reduce((acc, elem) => acc+elem.outerHTML, '');
document.querySelector('#b').innerHTML = new_order;

#a{
  background-color: gold;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
  color: red;
}

#b{
  background-color: orange;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.x{
  background-color: blue;
  display: block;
  height: 200px;
  width: 100%;
 position: relative;
  border: 2px solid white;
}

<div id='a'>
  <div id='b'>
    
    <div class='x'>
      <h1>A</h1>
    </div><!--</x>-->
    <div class='x'>
      <h1>B</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>C</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>D</h1>
    </div><!--</x>-->
    
  </div><!--</b>-->
</div><!--</a>-->

You can even simplify this js into a one-liner if you use .reduceRight() instead:

document.querySelector('#b').innerHTML = [...document.querySelectorAll('.x')].reduceRight((a, e) => a+e.outerHTML, '');

Answer 3

I have provided a link in the comments and here to a previous similar question with a number of valid answers: Previous Question

For your question specifically, you can add the following pure JavaScript :

<script>

window.onload = function(){
reverseEls("b"); // Reorder your divs
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); // Scroll to the bottom of the page
    }

function reverseEls(elem){
    elem = document.getElementById(elem);
        for (var i=0;i<elem.childNodes.length;i++) {
            elem.insertBefore(elem.childNodes[i], elem.firstChild);
        }
    }

</script>

This will reverse your divs as desired and also scroll to the bottom of the page.

Answer 4

You can use document.querySelectorAll to get all of the elements with a class of x and you can convert it to an Array with [].slice.call. You can then set the #b element's innerHTML to '' which removes all elements inside it and reverse the Array of elements with a class x and use forEach to append each element to the #b element.

You can use elem.scrollTop = elem.scrollHeight; to scroll elem to the bottom.

#a{
  background-color: gold;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
  color: red;
}

#b{
  background-color: orange;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.x{
  background-color: blue;
  display: block;
  height: 200px;
  width: 100%;
 position: relative;
  border: 2px solid white;
}

<div id='a'>
  <div id='b'>
    
    <div class='x'>
      <h1>A</h1>
    </div><!--</x>-->
    <div class='x'>
      <h1>B</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>C</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>D</h1>
    </div><!--</x>-->
    
  </div><!--</b>-->
</div><!--</a>-->
<script>
var container = document.querySelector('#b');
var elems = [].slice.call(document.querySelectorAll('.x'));
container.innerHTML = "";
elems.reverse().forEach(function(elem, index){
 container.appendChild(elem);
});
container.scrollTop = container.scrollHeight;
//scroll to bottom of #b div
var body = document.body,
html = document.documentElement;
var docheight = Math.max( body.scrollHeight, body.offsetHeight, 
                   html.clientHeight, html.scrollHeight, html.offsetHeight );
//get height of document cross-browser
window.scrollTo(0, docheight);
//scroll to bottom of document
</script>

JSFiddle Demo: http://jsfiddle.net/nfwcp960/embedded/result