Internet Explorer innerHTML problem while adding rows in table with javascript

If you are a web developer and work with js/AJAX, surely you would have faced a situation like this.
I had a table in a page. What i had to do was create rows in javascript and set the innerhtml of table to the rows created. Something like this-

var tableContents = "";
for(var i=0;i<;5;i++)
{
	tableContents+= "<tr>";
	tableContents+= "<td>";
	tableContents+= "cell content";
	tableContents+= "</td>";
	tableContents+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableContents;

Of course assuming myTable is the table element available in the page.

I prefer innerHTML over DOM functions as they are faster on all browsers and platforms.

Anyway, I checked above code and found that it worked perfectly in all browsers (firefox, opera …) except IE (http://www.schneier.com/blog/archives/2005/12/internet_explor.html).
No error and nothing, my table was still empty.

Well, after many undsuccessfull attempts with innerHTML,I tried google and came up with this.

http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
It clearly says-

“The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.”

I dont know why they have done this but thats the way IE is.
So keep in mind the next time you have to do something like this.

Related Posts

• Filling a select box using javascript and jQuery
• 5 must have firefox addons for every web developer
• Why you MUST use client side validation
• 8 blogs you must read if you are a web developer
• jQuery Tip: Finding tag name of an element