How to edit a table in Internet Explorer 5 without innerHTML?

Question

I'm trying to make a barcode scanner and I have a problem when some product doesn't exist it creates a new array with JavaScript and sends the problem to the that table. My problem is that I can't edit the table with innerHTML

JavaScript Function:

var table = document.getElementById("listViewTable");
var tableF = document.getElementById("listTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var td1 = document.createElement("td");

//row.innerHTML = '(A few <td> and an <input>)';

td1.innerHTML = '(More <td> and another <input>)';
row.appendChild(td1);
row.className = "tableCell newSKU";

That commented line row.innerhtml is what I tried to achieve but I.E does not support it.

This should be the end result:

The last product in yellow can't be put in the same table and as such does not have the same style as the others.

Answer 1

From ppk's guide to browser quirks:

In IE9 and lower innerHTML refuses to work on tables and selects. Solve this by using pure DOM methods instead. See this explanation of the table behaviour by innerHTML’s inventor. I assume something similar goes for selects.

Use createElement, appendChild and friends to create the cells.