Scriptaculous Effects using innerHtml vs. DOM methods

Help! I've solved a problem without successfully understanding what caused it. I'm posting this because maybe it will help somebody else, and perhaps somebody can tell me why it happens in the first place.

PROBLEM: Using innerHtml to add a textbox to an array of textboxes causes the contents of textboxes to be blanked out. It also means I cannot queue scriptaculous effects for displaying the textboxes, instead the effects execute in parallel. Here is the Javascript:

function newTextBox() {

    count+=1;

    new_companies.innerHTML+="<div id=new_company"+count+" class=new_company style={display:none} ><input type=text id=company["+count+"] name=company["+count+"] size=30 />";

    new Effect.SlideDown("new_company"+count, { queue:'end'});

}

SOLUTION: By replacing that function with the following, everything works as expected. Adding textboxes doesn't affect the textboxes already on the screen, and my scriptaculous effects queue properly instead of executing in parallel. Here is the new Javascript:

function addTextBox() {

    count+=1;

    var all_companies = document.getElementById('new_companies');

    var newdiv = document.createElement('div');

    var divIdName = "new_company"+count;

    newdiv.setAttribute('id',divIdName);

    newdiv.setAttribute('class',"new_company");

    newdiv.setAttribute('style',"{display:none}");

    newdiv.innerHTML = "<input type=text id=company["+count+"] name=company["+count+"] size=30 />"

    all_companies.appendChild(newdiv);

    new Effect.SlideDown("new_company"+count, { queue:'end'});

}