I'm facing an issue with my AJAX application. It successfully downloads a JSON object and uses the data to add rows to an HTML <table> using Javascript DOM functions. Everything works smoothly, except when testing it in Internet Explorer. Surprisingly, IE doesn't throw any errors, and after confirming that the code is being executed, it simply doesn't have the desired effect. To showcase this problem, I quickly put together this demonstration:
<!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 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);
tableElement.appendChild(newRow);
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>
Although I haven't verified this on IE 8, both IE 7 and IE 6 seem to not display the additional rows that should be added. I find this puzzling. Is there a workaround for this issue, or could there be something wrong with my implementation?