Change Div Content with JavaScript, onmouseover and onmouseout?

Change Div Content with JavaScript, onmouseover and onmouseout?

I have the following code:
window.onload = function createDivs() {
for(var i = 1;i<29;i++) {
var div = document.createElement("div");
var body = document.getElementsByTagName("body")[0];
var n1 = document.createTextNode("Cell " + i);
var n2 = document.createTextNode(i + " Cell");
div.style.width = "100px";
div.style.height = "100px";
div.style.border = "1px solid red";
div.style.cssFloat = "left";
div.style.margin = "1px"
div.className = i;
body.appendChild(div);
}
div.onmouseover = function() {
this.appendChild(n1);
},
div.onmouseout = function() {
this.appendChild(n2);
}
}
what I want to acheive
on mouseover of each div, the div should have a text of cell 1, cell 2,
..... upto cel 28. But I am just getting Cell 28 on hover for each cell.
2. I also want to achieve that onmouseout, the cell should have "1 cell"
as text, but its not working.
Any help is appreciated.
http://jsbin.com/iXuLEDE/7/edit?html,output