javascript - innerHTML append in IE9 - Stack Overflow

I have a page that simply tries to do the following in a javascript function:document.getElementById(&q

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?!

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?!

Share Improve this question edited May 14, 2017 at 21:10 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jul 9, 2012 at 2:01 user1510816user1510816 31 silver badge2 bronze badges 1
  • Did the Javascript file execute after the document is loaded ? Any error in browser's development console ? – Raptor Commented Jul 9, 2012 at 2:20
Add a ment  | 

2 Answers 2

Reset to default 6

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.

In addition to Jim's answer, when you append HTML, you destroy and rebuild the existing table. Even in browsers that let you do this, the generally better solution to add a row is this:

var table = document.getElementById("chatTable"),
    row = table.insertRow(-1), //-1 means at end
    cell = row.insertCell(0),
    span = document.createElement("span");

span.style.color = "purple";
span.appendChild(document.createTextNode("------------Switched to channel: " + channelName + "------------"));
cell.colSpan = 3;
cell.appendChild(span);
row.appendChild(cell);
table.appendChild(row);

It is generally faster and you don't lose any existing event handlers you have attached to things in the table.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745109616a4611767.html

相关推荐

  • javascript - innerHTML append in IE9 - Stack Overflow

    I have a page that simply tries to do the following in a javascript function:document.getElementById(&q

    5小时前
    20

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信