Wypisywanie serii znaków w innerHTML Opcje

[blackstone]

Witam, próbuje napisać skrypt który wpisany w pole tekstowe wyraz przedstawi w postaci ciągu literek - chodzi o to by każda litera znajdowała się w osobnym divie. Wszystko działa prawie dobrze ale problem polega na tym że skrypt wypisuje mi ostatnią literę wyrazu który zatwierdzam - javascript zamiast wyświetlić ciąg znaków wyświetla mi ostatni znak przerobiony przez skrypt. Wiem ze da się to zrobić za pomocą document.write() ale ta funkcja rozwala cały HTML , czy można to zrobić jakoś za pomocą innerHTML lub czegoś podobnego ? Gdy wyświetlam samą cyfrę dzieje się to samo, ale gdy zamiast innerHTML użyje document.write() to pokazuje się cały rząd cyferek prawidłowo.

[HTML] pobierz, plaintext 
var haslo=document.getElementById("tekst").value ;
var longer=haslo.length;
 
 
 
 
             for(i=-1 ; i<longer ; i++)
      {
 
var litera=haslo.charAt(i);
var box=' <div class="litera"> ' + litera  +  '</div>' ;
document.getElementById("field").innerHTML=box ;
      }
[HTML] pobierz, plaintext 

[blackstone]

Wziąłem w komentarz poprzednią część skryptu i zrobiłem coś takiego z wykorzystaniem apppendchilda ale tym razem nic nie działa ( jakby nie było w ogóle JS na stronie )

[HTML] pobierz, plaintext 
 
            for(i=-1 ; i<longer ; i++)
      {
 
var litera=haslo.charAt(i);
/* var box=' <div class="litera"> ' + litera  +  '</div>' ;
var litera=haslo.charAt(i);
box=' <div class="litera"> ' + litera  +  '</div>' ; */ 
 
var elm=document.getElementById("field") ;
div = document.createElement( 'div' );
div.textContent = litera;
elm.appendChild('div') ;
 
 
      }
 
[HTML] pobierz, plaintext