This example shows how you can reverse nodes on the document object model (DOM). It consists of a DIV that surrounds all the posts with a unique ID and a DIV surrounding each individual post.
<DIV ID="blog"> <DIV>Post 3</DIV> <DIV>Post 2</DIV> <DIV>Post 1</DIV> </DIV>When the page loads, the javascript function "reverse_posts()" is called,
<BODY ONLOAD="reverse_posts();">which loops through the post DIVs from bottom to top removing the current one and appending it to the bottom.
function reverse_posts()
{
blog = document.getElementById('blog'); // get reference to div surrounding all posts
posts = blog.childNodes; // get array of references to divs surrounding individual post
numposts = posts.length; // get number of posts
for (i = numposts - 1; i >= 0; i--) // loop backward through posts
{
c = blog.removeChild(posts[i]); // remove post (starting at end moving towards front)
blog.appendChild(c); // append to end
}
}
The "posts" below should appear in chronlogical order (1,2,3) even though they are in reverse chronological order (3,2,1) in the actual HTML source.