Question

我在页面中使用Java Script修改document.getElementById('').innerHTML。它在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中，see MSDN：

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

（强调我的）

Colin's work-around（在innerText上设置td而不是innerHTML上的tr，对您来说是个不错的选择。如果您的需求变得更加复杂，您将不得不诉诸The Table Object Model。

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）的开销

Answer 3

在另一个StackOverflow问题上，我找到了一个博客文章的链接，该文章是由实施Trident引擎部分的人编写的。这是一个设计缺陷（由于缺乏时间和向后兼容性问题），从未修复过。你可以read his notes (including his personal workaround) here。

但是，要在我的项目上修复它，因为我已经在使用jQuery，所以我只使用了jQuery的.html()函数。

// OLD 
localRows[cIndex].innerHTML = '<div>Test Div</div>';

// FIXED
$(localRows[cIndex]).html('<div>Test Div</div>');

Answer 4

当你使用tr元素的innerHTML时，我相信IE表现得很奇怪。我会用getElementById选择行，然后选择td并改变那个的innerHTML：

document.getElementById('abc').firstChild.innerHTML = 'abc';

（虽然你必须小心：通常tr和td之间的空格将被视为有效节点）

有一大堆特殊函数用于处理DOM中的表

var tblBody = document.getElementById(tblId).tBodies[0];
var newRow = tblBody.insertRow(-1);
var newCell0 = newRow.insertCell(0);

查看此处的所有功能：http://www.mredkj.com/tutorials/tablebasics1.html

Answer 5

innerHTML是只读的，如下所示： http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

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

为什么你不只是围绕着改变那个特定的价值？

Answer 6

您也可以使用<div></div>

代替<span></span>

Answer 7

请改用：

document.getElementById('abc').innerText = 'ccc';

Answer 8

感谢非常有帮助的.html()

我正在使用

document.getElementById('site'+cValue).innerHTML=tableReadyElem; //work with mozila not ie

$(document.getElementById('site'+cValue)).html(tableReadyElem);//work for both

为什么document.getElementById（'tableId'）。innerHTML在IE8中不起作用？

8 个答案: