DOM scripting - new rows in a table

[Greg A Watson]

I'm trying to use the response from an Ajax to create a new row in a table element. Code is something like this:

    
//response parsed into a JS object 'response'
var row = document.createElement("tr");
 
//..following code repeated several times in a function call
var cell = document.createElement("td");
var txtNode = document.createTextNode(response.someProperty)
cell.appendChild(txtNode);
row.appendChild(cell);
//....end of repeating code
 
dojo.byId("resultsTable").appendChild(row);

This all works in fine in Firefox. In IE(7), no new row appears - however, if I look at the DOM using the IE Developer Toolbar, the new row & cells have been inserted at the correct position in the DOM.

Any ideas? All help much appreciated...

Thanks

[Eric Pascarello]

You should be appending the rows to the tbody and not the table itself

Here is a basic working example

 
<table id="a">
  <tr>
    <td>a</td>
  </tr>
</table>
 
<script type="text/javascript">
  function addRow(){
    var tr = document.createElement("tr");
    var td = document.createElement("td");
    td.innerHTML = "test";
  
    var tbody = document.getElementById("a").getElementsByTagName("tbody")[0];
    tr.appendChild(td);
    tbody.appendChild(tr);
  }
  window.onload = addRow;
</script>
 

Eric