Multiple document.getElementById not working.

I'm trying to write a script that updates a div live one character at a time it does not seem to be working it only displays the final document.getElementById and does not display the build up to it.

echo "var unnavigation = document.getElementById('navigation').innerHTML;";
echo "output = new String;";
echo "Temp = new Array();";
echo "TextSize = unnavigation.length;";
echo "for (i = 0; i < TextSize; i++) {";
echo "Temp[i] = unnavigation.charCodeAt(i)- 1;";
echo "}";


echo "for (i = 0; i < TextSize; i++) {";
echo "output += String.fromCharCode(Temp[i]);";
echo "document.getElementById(\"navigation\").innerHTML = output;";
echo "}";

PHP:

I have tried adding a wait() before the document.getElement in case it was going to fast to see but that does not work ether it still only displays the final getElementById only now it takes longer.

Any help or ideas would be greatly appreciated. Im not even sure if what im asking is possible so any input would be great.

Thanks in advance.