IE td 元素的 innerhtml 解决方法？答案

【问题标题】：innerhtml workaround for IE td elements?IE td 元素的 innerhtml 解决方法？
【发布时间】：2011-03-31 08:01:32
【问题描述】：

我有以下功能：

<script type="text/javascript">
function changeText(elem){
  var oldHTML = document.getElementById(elem).innerHTML;
  var newHTML = "<span style='color:red'>" + oldHTML + "</span>";
  document.getElementById(elem).innerHTML = newHTML;
 }

</script>

还有以下 HTML：

<table>
<tr>
<td id = "foo">bar</td>
</tr>
</table>

这会引发“未知的运行时错误”（仅在 IE 中），谷歌搜索告诉我表格元素在带有 innerHTML 的 IE 中是只读的。

我已经尝试寻找解决方法，但它们并没有针对我的具体问题，这只是我想让“bar”这个词变成红色。我不想把“酒吧”这个词改成别的东西。纯粹是颜色变化。

有没有什么方法可以做到这一点，而不需要复杂而缓慢的 DOM 函数，并且不必更改页面上的任何其他 HTML 标记？这是一个表格，其中有一个表格，如果冲浪者提交的表格有错误，“错误”字段应该变成红色。它必须能够执行多次，因为冲浪者可能会弄乱多个字段。

感谢您的建议。

【问题讨论】：

标签： javascript css internet-explorer dom innerhtml

【解决方案1】：

为什么不把单元格改成color:'red'：

var td = document.getElementById(elem);
td.style.color = 'red';

【讨论】：

【解决方案2】：

有几种解决方法。这里有一些快速的方法可以让您开始 - 或者直到其他人提供更清洁/更好的方法。

我更喜欢以下：在 css 中定义一个错误类：

.errorHighlight { color:red;}

那么对于javascript：

function changeText(elem){ 
  document.getElementById(elem).className="errorHighlight"; 
} 
function changeTextBack(elem){ 
  document.getElementById(elem).className=""; 
}

这假设您还没有设置任何类。如果您这样做，您可能需要阅读名称，并在错误类后面附加一个空格。

同样，有很多方法可以解决这个问题，您希望选择最适合您的应用程序的一种。

【讨论】：