IE 6 Can Get Punched by a Goat
Ran into an interesting javascript problem today.
One of our programmers wrote a script which grabbed some external data and formatted it into a table. Straightforward stuff. He opted for the W3C DOM method. I advised against it, simply because that route is a pain when it comes to IE 6 in my experience.
For those of you who don’t know, it’s kind of similar to writing normal HTML, except it’s done dynamically. So you typically start by creating a node:
yaytable = document.createElement("table");
Even if you don’t know javascript but you know some HTML you can pick it up. You then create the row:
yayrow = document.createElement("tr");
and the cell for the data that goes in one of the columns:
yaycell = document.createElement("td");
Then you create the node that contains whatever data you want to put in there:
yaydata = document.createTextNode("Whee!");
Then you can slap them all together:
yaycell.appendChild(yaydata);
yayrow.appendChild(yaycell);
yaytable.appendChild(yayrow);
document.body.appendChild(yaytable);
So far, so good. In firefox, this results in:
<table><tr><td>Whee!</td></tr></table>
Yay, a dynamically generated table. Now, there’s an easier way to do this — one that makes a lot of us web guys a little ill:
document.body.innerHTML += "<table><tr><td>Whee!</td></tr></table>";
A lot quicker. But it’s not part of the standard, and it comes with its own drawbacks.
Anyway, like I said, he used the first method. It’s a neat way to do it. You can, for example, do something like — yayrow.style.backgroundColor = ‘red’; — or something later on. Using the innerHTML way, you really just have to rewrite the string, which is inconvenient.
A quick note — I’m sure that this simple example would probably work in IE 6. However, in his case, it did not work. I’m really not sure why. You could look at the dom in IE and see the table in there, along with all of the data. You could pull up a javascript console and output the contents of (for example) yaytable.innerHTML and you could see it. But it wasn’t visible on the page. It worked fine in Firefox, of course.
He struggled with it for a good long time. I won’t say how long. Eventually I told him that since it was a quick job, he really should go the easy route, propriety be damned. It would have taken all of 10 minutes, if that.
Still, he had spent a lot of time on it. Understandably, he wasn’t ready to scrap it.
I eventually figured out a way to do it. It’s ironic and stupid. Basically, tack something like this on to the end of the previous code:
crap = yaytable.innerHTML;
yaytable.innerHTML = crap;
And, I shit you not, it worked. I think I know why, but it still doesn’t explain why there was a problem in the first place.
Anyway, I guess the point in all this is that yeah, there is a “right” way to do things. And it should work. And people who haven’t spent nearly every day for years struggling to get IE 6 to do even the simplest things scoff when you tell them to not expect reasonable behavior from it. I get that from people all the time. Luckily, sometime after I turned 26 or so, I stopped caring when people thought I was an idiot. If you prove me wrong, yay. Makes my life easier.
When you’re creating something for a client, 99% of the time they don’t care how you do it. They just want it done. And sometimes it’s not worth the effort to try to do it the right way.
Not that there isn’t value in trying, of course. There is. I plan on figuring this out, in fact. It’s probably something very simple that I’m overlooking, even though several people looked at this problem. It could be due to a lot of factors. I don’t know.
I ran into a similar problem a while back with flapping crane. Check out line 149 of scripts.js sometime for a laugh (hint — use View Source). It’s in the loadSkit() function.
Update: Yay, I think I found a fix. IE seems to require a TBODY tag. Quick example:
yaytable = document.createElement("table");
yaytbody = document.createElement("tbody");
yayrow = document.createElement("tr");
yaycell = document.createElement("td");
yaydata = document.createTextNode("Whee!");
yaycell.appendChild(yaydata);
yayrow.appendChild(yaycell);
yaytbody.appendChild(yayrow);
yaytable.appendChild(yaytbody);
document.body.appendChild(yaytable);
From the spec:
The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections. The TBODY end tag may always be safely omitted.
Am I reading that wrong? More info.