Search code examples
javascriptinternet-explorerhtml-tableinternet-explorer-9innerhtml

innerHTML append in IE9

I have a page that simply tries to do the following in a javascript function:

document.getElementById("chatTable").innerHTML += "<tr><td colspan=\"3\">      ⏎
    <span color=\"purple\">------------Switched to channel: " + channelName +  ⏎
    "------------</span></td></tr>";

This works in every other browser I have tried (Firefox, Chrome, Safari, Android phone browsers, iPhone browsers) but not in IE9. Yes, I do have a table with the ID chatTable and the channelName variable is indeed set. I understand I may be able to actually append a table row using the DOM for the Table Object (I think its insertRow() or something) but now it has just became a matter of principle, and its been driving me nuts. I have tried changing the += to just = and no luck. I also tried setting the table to its own variable in javascript and THEN trying to edit the innerHTML and still no luck. Oh and I do have: 

<!DOCTYPE HTML>

in my page. What am I doing wrong?!

Solution

  • You cannot use .innerHTML or .outerHTML with any of the following elements: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, or TR.

    See Building Tables Dynamically to use Microsoft's Table Object Model to manipulate tables in Internet Explorer.

    This could change in future versions of IE, I suppose, but this is what you're left with for now.