Pfthb

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

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/

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

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()

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.

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

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