DOM Gotchas

In an effort to help others avoid the pitfalls I find I am detailing here two trouble spots I recently ran into with Internet Explorer and The DOM.

First look at this javascript:

 var obj = getObjectRefByID(someID);
 var tbl = document.createElement("table");
 var tr = document.createElement("tr");
 var td = document.createElement("td");
 var tn = document.createTextNode("This is a test");
 td.appendChild(tn);
 tr.appendChild(td);
 tbl.appendChild(tr);
 obj.appendChild(tbl);

//purely for testing purposes
alert(obj.innerHTML);

Why do you think the table wouldn't appear in the webpage within the element? It's kind of sly why it doesn't. For further confusion add an alert(obj.innerHTML) to the end of the code. You will see all the html needed to render the table. What gives?

 var obj = getObjectRefByID(someID);
 var tbdy = document.createElement("tbody");
 var tbl = document.createElement("table");
 var tr = document.createElement("tr");
 var td = document.createElement("td");
 var tn = document.createTextNode("This is a test");
 td.appendChild(tn);
 tr.appendChild(td);
 tbdy.appendChild(tr);
 tbl.appendChild(tbdy);
 obj.appendChild(tbl);

You'll see I added a tbody element and now the table renders properly. Without that IE won't display the table object I built up and inserted into the DOM. This is a subtle addition but very important. Note: without the tbody object the table was rendered fine in Mozilla browsers.

Interestingly, according to the HTML4 standard a tbody isn't required within a table:

Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.

This next one is pretty subtle too and again only occurs in Internet Explorer (as far as I know).

 var obj = getObjectRefByID(someID);
 var cbx = document.createElement("checkbox");
 cbx.type = "checkbox";
 cbx.id = "myCBX";
 cbx.setAttribute("checked","checked");
 obj.appendChild(cbx);

// for debugging purposes
alert(cbx.checked);

You will noticed I set the checked status on the checkbox. But when IE renders that code the checkbox is unchecked. But when I do the alert it tells me true. What the...? Well, it turns out IE's rendering doesn't care what I do to the checkbox before I insert it into the document. IE only reflects those changes made after the insertion - so the order of events has to be as follows:

 var obj = getObjectRefByID(someID);
 var cbx = document.createElement("input");
 cbx.type = "checkbox";
 cbx.id = "myCBX";
 obj.appendChild(cbx);
 cbx.setAttribute("checked","checked");

One more thing related to that last example. You need to assign the type to the object before you insert it into the document or else IE will complain and show a text element instead of a checkbox. My natural inclination was to fully prepare the object before I inserted it into the document which was almost correct except for that checked attribute. Again, the first code sample worked flawlessly in Mozilla.

Wierd stuff to be sure. They are also highly annoying and can be difficult to debug since IE tells you everything you did is correct. Hopefully these two "gotchas" won't get you!