Using the core DOM

Reversing the order of siblings

First, we create a DIV container with a white background and ID="boxes" and put there several SPAN tags representing the color boxes:

Clicking this button results in reversing the order of the color boxes:     Reverse siblings

This can be achieved with the following function:

function reverse(n)
{
  var kids = n.childNodes;
  var kidsNo = kids.length;
  for (var i=kidsNo-1; i>=0; i--)
  {
    var c = n.removeChild(kids[i]);
    n.appendChild(c);
  }
}

By passing to it the parameter n = document.getElementById("boxes")

Inserting a new element

In the next example we time stamp the button click events.

Click me

This can be achieved with the following function:

function timeStamp()
{
  var date = new Date();
  var s = "Clicked at " + date.getHours() + ":" + date.getMinutes() + ":" + 
           date.getSeconds();
  var p = document.createElement("p");
  p.appendChild(document.createTextNode(s));

  var n = document.getElementById("tStamp");
  var c = n.firstChild;
  c = c.nextSibling;
  n.insertBefore(p, c);
}

Displaying the bar chart

You can examine the source (check the JavaScript section at the very bottom) to figure out how it is done.