Question

我有一个页面只是尝试在javascript函数中执行以下操作：

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

这适用于我尝试过的所有其他浏览器（Firefox，Chrome，Safari，Android手机浏览器，iPhone浏览器），但不适用于IE9。是的，我确实有一个标识为chatTable的表，并确实设置了channelName变量。我知道我可以使用DOM为表对象实际附加一个表行（我认为它是insertRow()或者其他东西），但现在它已成为一个原则问题，它一直让我疯狂。我尝试将+=更改为=，但没有运气。我也尝试在javascript中将表设置为自己的变量，然后尝试编辑innerHTML并且仍然没有运气。哦，我确实有：

<!DOCTYPE HTML>

在我的页面中。我做错了什么？！

Answer 1

您不能将.innerHTML或.outerHTML与以下任何元素一起使用：COL，COLGROUP，FRAMESET，HTML，STYLE，TABLE，TBODY，TFOOT，THEAD，TITLE或TR。

请参阅Building Tables Dynamically以使用Microsoft的表对象模型来操作Internet Explorer中的表。

我想，这可能会在IE的未来版本中发生变化，但这就是你现在所剩下的。

Answer 2

除了Jim的回答，当你附加HTML时，你会破坏并重建现有的表。即使在允许您这样做的浏览器中，添加行的通常更好的解决方案是：

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);

它通常更快，您不会丢失任何已附加到表格中的事物的现有事件处理程序。

innerHTML附加在IE9中

2 个答案: