IE won't display form elements added via appendChild()

[hmundy]

I have a browser incompatibility issue when using appendChild() to add form elements "on the fly." Works great in Firefox but not in IE.

I'm adding table rows that contain <input type='text'> elements. I know that the rows are being added to the table because the count of table rows increases each time. But the newly added rows remain invisible in the IE window. Can anyone provide a clue as to what I need to do for success in IE. Thank you!

// Adds five more choice rows to the question form.
function addChoices()
{
var choicesTable, choices, numChoices, newTR, newTD;


choicesTable = document.getElementById("choices_table");


choices = choicesTable.getElementsByTagName('tr');
numChoices = choices.length;


for (var i = numChoices - 1; i < numChoices + 4; i++)
{
newTR = document.createElement("tr");
newTR.setAttribute('class', 'alt1');
newTD = document.createElement("td");
newTD.innerHTML = "&nbsp;<input type='text' name='choice_text[" + i + "]' size='50' maxlength='50' value=''>&nbsp;";
newTR.appendChild(newTD);
newTD = document.createElement("td");
newTD.innerHTML = "&nbsp;<input type='text' name='choice_code[" + i + "]' size='25' maxlength='25' value=''>&nbsp;";
newTR.appendChild(newTD);
newTD = document.createElement("td");
newTD.innerHTML = "&nbsp;<input type='text' name='choice_sort[" + i + "]' size='5' maxlength='5' value=''>&nbsp;";
newTR.appendChild(newTD);
newTD = document.createElement("td");
newTR.setAttribute('align', 'center');
newTD.innerHTML = "<input type='hidden' name='choice_active[" + i + "][0]' value='filler'><input type='checkbox' name='choice_active[" + i + "][1]' checked>";
newTR.appendChild(newTD);


choicesTable.appendChild(newTR);
}


choices = choicesTable.getElementsByTagName('tr');
numChoices = choices.length;
alert(numChoices);
}