IE td 元素的innerhtml 解决方法？

Question

我有以下功能：

<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”这个词变成红色。我不想把“bar”这个词改成别的东西。纯粹是颜色变化。

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

感谢您的任何建议。

Answer 1

为什么不直接将单元格更改为 color:'red' ：

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

Answer 2

有几种方法可以解决这个问题。这里有一些快速的方法可以帮助您继续前进，或者直到其他人提供更干净/更好的方法为止。

我更喜欢以下内容： 在 css 中定义错误类：

.errorHighlight { color:red;}

然后对于 javascript：

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

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

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