为什么document.getElementById('tableId').innerHTML在IE8中不起作用？

Question

我document.getElementById('').innerHTML在页面中使用Java Script进行修改.它在Firefox中运行良好,但不是IE8.请参阅下面的详细信息:

HTML代码:

<table>
  <tr id="abc">
     <td id="ccc" style="color:red;">ccc</td>
  </tr>
</table>

Java脚本代码:

  document.getElementById('abc').innerHTML = '<td id="bbc" style="color:yellow;">abc</td>'

当我在Firefox中运行JS代码时,它会将显示字从"ccc"更改为"abc",但它只是在IE8中不起作用,有人知道为什么吗？有什么方法可以让我在IE8中工作吗？

Answer 1

由于问题出在IE8中,请参阅MSDN:

该属性是读/写的除以下所有对象,它是只读的:COL,COLGROUP,FRAMESET,HEAD,HTML,STYLE,TABLE,TBODY,TFOOT,THEAD,TITLE, TR.

(强调我的)

在你的情况下,科林的解决方案(设置innerText在td而不是在innerHTML上面tr)是一个很好的解决方案.如果您的需求变得更加复杂,您将不得不求助于表对象模型.

Answer 2

由于TR的innerHTML是只读的,正如少数人所说的那样,你最好更改标记以定位TD:

<table><tr><td id="changeme"> ... </td></tr></table>

然后,您可以通过innerHTML设置TD的内容,并通过在DOM节点上设置它们来更改其他属性:

var td = document.getElementById("changeme");
td.innerHTML = "New Content";
td.cssText = "color: red";
td.className = "highlighted";

你明白了......

这样可以节省破坏和创建额外DOM元素(TD)的开销