Porting JavaScript to Internet Explorer

While porting a small AJAX application I wrote to Internet Explorer, I encountered a few problems:

1. IE doesn’t like <script> tags without a matching closing tag. This is especially a problem if you use the src attribute and try to use an XHTML-like closing tag like this:

   <script src="..."/>
   

   In this case IE doesn’t draw anything at all, since it keeps looking for the end of the script and doesn’t find it. This is especially a problem with templating toolskits like Kid. If Kid encounters a construct like <foo></foo> it will correctly shrink this to <foo/> in the XML output. The solution is rather easy: Insert a newline character between openening and closing tag in the template. Since Kid has now way to determine whether this whitespace is significant it will keep it in the output.

2. It seems that IE doesn’t like trailing commas in JavaScript object literals:

   var o = {
       x: 'Foo',
       y: 1,
   };
   

   I like to insert trailing commas in cases like this. It’s easy to forget to add one if extending the property list. Firefox parses the trailing comma, while IE doesn’t. (IE follows the ECMAScript standard here, which doesn’t allow the trailing comma. Indeed in array literals a trailing comma has a special meaning, so it’s probably a good idea to disallow the trailing comma in object literals.)

3. My AJAX application queries a web service for a list of items and displays that list in a table. The table is generated in HTML code like this:

   <table id="mytable">
       <tr>...</tr>
   </table>
   

   I then used JavaScript code like the following to populate that table:

   var table = document.getElementById("mytable");
   var trTag = createRow();
   table.appendChild(trTag);
   

   This worked fine in Firefox, but no matter what I did, IE refused to render the table rows. After much hair tearing I remembered that Firefox’s DOM Inspector showed a TBODY element just beneath the TABLE element and TR elements are attached to the former. The DOM Inspector basically showed the following structure:

   • TABLE id=mytable
     • TBODY
       • TR (my header row from the HTML)
     • TR (a dynamically generated row)
     • …

   So I changed my code to append the newly generated rows to the TBODY instead:

   var table = document.getElementById("mytable").
       getElementsByTagName("tbody")[0];
   var trTag = createRow();
   table.appendChild(trTag);
   

   This works in Firefox and IE.