Rendering table in IE using DOM

So I thought I’d share with people who would be interested in these sort of things (programming), especially dealing with JavaScript’s Document Object Model (DOM). I came across an annoying bug that has bugged me for the past few days which turned out to be quite simple.

First take a look at the following JavaScript:

var container = document.createElement(“div”);
var table = document.createElement(“table”);
var tr = document.createElement(“tr”);
var td = document.createElement(“td”);
var text = document.createTextNode(“This is a test.”);
td.appendChild(text);
tr.appendChild(td);
table.appendChild(tr);
container.appendChild(table);
document.body.appendChild(container);

When you go alert(container.innerHTML), you will see that the DOM is created correctly but for some reason it is not showing up. Even by inspecting the DOM using IE7′s add-on, IE Developer Toolbar, you will see that the DOM is constructed correctly. When running this on Firefox, the code seems to work the way you want it to. So what the heck is the problem?!?

Well after many hours of googling, I came across an article that helped me solve my problem. Apparently, a tbody element is required within the table tag which is interesting because according to the HTML4 Standard, a tbody isn’t required within a table. Adding a couple of lines will fix this rendering problem:

var table = document.createElement(“table”);
var tbody = document.createElement(“tbody”); <–
var container = document.createElement(“div”);
var tr = document.createElement(“tr”);
var td = document.createElement(“td”);
var text = document.createTextNode(“This is a test.”);
td.appendChild(text);
tr.appendChild(td);
tbody.appendChild(tr); <–
table.appendChild(tbody); <–
container.appendChild(table);
document.body.appendChild(container);

Hopefully you won’t spend as much time as me trying to figure out this problem.

Related Posts

• JavaScript Inheritance
• flip text
• Read Google Analytics Cookie Script
• Google Analytics: Does 301/302 Redirect Preserve Referrer Information?
• New Wordpress Theme Coming Soon

Tags: javascript, tutorial