Can't dynamically add rows to a <TABLE> in IE?
You need to create a TBODY element to add your new TR to and then add the TBODY to your table, like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body><table id="employeetable"> <tr> <th>Name</th> <th>Job</th> </tr></table><script type="text/javascript"> function addEmployee(employeeName, employeeJob) { var tableElement = document.getElementById("employeetable"); if (tableElement) { var newTable = document.createElement('tbody'); // New var newRow = document.createElement("tr"); var nameCell = document.createElement("td"); var jobCell = document.createElement("td"); nameCell.appendChild(document.createTextNode(employeeName)); jobCell.appendChild(document.createTextNode(employeeJob)); newRow.appendChild(nameCell); newRow.appendChild(jobCell); newTable.appendChild(newRow); // New tableElement.appendChild(newTable); // New alert("code executed!"); } } setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000); setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000); setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000);</script></body></html>
Apparently, in IE you need to append your row to the TBody element, not the Table element...See discussion at Ruby-Forum.
Expanding on the discussion there, the <table> markup is generally done without explicit <thead> and <tbody> markup, but the <tbody> ELEMENT is where you actually need to add your new row, as <table> does not contain <tr> elements directly.
Edit: now works in IE! insertSiblingNodesAfter uses the parentNode of the sibling, which happens to be a tbody in IE
It's hard to know what quirks are in store when you try to manipulate the DOM cross-browser. I'd recommend that you use an existing library that has been fully tested across all major browsers, and accounts for quirks.
Personally I use MochiKit, you can dive into DOM manipulation here:http://mochikit.com/doc/html/MochiKit/DOM.html
Your final function might look something like this:
function addEmployee(employeeName, employeeJob) { var trs = getElementsByTagAndClassName("tr", null, "employeetable"); insertSiblingNodesAfter(trs[trs.length-1], TR({}, TD({}, employeeName), TD({}, employeeJob)); alert("code executed!");}