Reverse DOM element 1

We can Reverse DOM elements. All we need is to use .reverse() the DOM elements.

Here I used Parent Child structure in HTML. You can use ul li to create parent - child structure.

	<!--Here is the HTML code-->
	<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	</div>
	<input type="button" id="btn" value="Show DESC">

view raw Reverse_DOM.html hosted with ❤ by GitHub

	//Here is the Javascript code
	$('#btn').click(function () {
	if (this.value == 'Show ASC') this.value = 'Show DESC';
	else this.value = 'Show ASC';
	var list = $('div.parent');
	var listItems = list.children('div.child');
	list.append(listItems.get().reverse());
	});

view raw reverseDOM.js hosted with ❤ by GitHub

See In the above code, the div contain .parent class is the parent div. Those divs contain .child class are child divs.

We used .reverse() to reverse the child div order and append it to parent div.
Here is the working DEMO