Internet Explorer innerHTML problem while adding rows in table with javascript

Posted By Vijay Joshi July 28, 2008
3 comments

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 x=""; var tableContents="
<tbody>"; for(var i=0;i&lt;5;i++) { x+="
<tr>" x+="
<td>row"+(i+1)+"</td>
" x+="</tr>
" } x+="</tbody>
"; document.getElementById("myTable").innerHTML = x;

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

javascript

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

3 Responses to “Internet Explorer innerHTML problem while adding rows in table with javascript”

Leave Comment

(required)

(required)


10,926 spam comments
blocked by
Akismet