Question

I have a situation when there’s a table and you can add a new row by clicking a button. The row is dynamically generated by a server and it is passed back in HTML. So basically what i need to do is prefix the new row to the old table. Something like this:

tableelement.innerHTML = newHtml + tableelement.innerHTML;

That surely works, but i have a table header and, obviously, i need to insert the new html after it. How would i do this? insertBefore or insertAfter can’t help (afaik), because they’re meant for inserting elements and not unparsed HTML. So how could i, having an object of the header’s row, insert another row (in HTML) after it (or before) ?

Thank you for your ideas

Answer 1

I would consider rethinking the approach. innerHTML is read-only for tables in Internet Explorer, so you’re bound to run into interoperability issues with your current method. You could restructure your code to build the elements using the DOM instead of specifying the innerHTML. It’s fairly straightforward, much more efficient (doesn’t invoke the parser) and more cross-browser compatible.

Mozilla seems to agree with Microsoft on this, and to quote the element.innerHTML documentation:

[innerHTML] should never be used to write parts of a table—W3C DOM methods should be used for that—though it can be used to write an entire table or the contents of a cell.

The process involves using the DOM Level 2 methods, table.insertRow() and tr.insertCell(). For a decent read, see Building Tables Dynamically (MSDN).

Example (from MDC):

function addRow(tableID)
{
  // Get a reference to the table
  var tableRef = document.getElementById(tableID);

  // Insert a row in the table at row index 0
  var newRow   = tableRef.insertRow(0);

  // Insert a cell in the row at index 0
  var newCell  = newRow.insertCell(0);

  // Append a text node to the cell
  var newText  = document.createTextNode('New top row')
  newCell.appendChild(newText);
}