javascript - innerHTML 没有正确更新

Question

我正在尝试用 Javascript 构建一些基本的 HTML 表单验证。我的表单保存在一个表中，每个输入的右侧都有一个额外的列，ID 为“ErrorX”，最初填充了一些文本以表明它是必填字段。

<FORM NAME="ContactForm" METHOD=POST ACTION='Order3.php' onsubmit="return validateForm()">
<TABLE>
 <TR>
  <TD ALIGN=LEFT>Your name:</TD>
  <TD ALIGN=RIGHT><INPUT TYPE=TEXT ID="Field1" NAME="Field1"></TD>
  <TD ALIGN=LEFT ID="Error1">Required</TD>
 </TR>
</TABLE>
<input type=submit value='Confirm ->'></FORM>

按下提交按钮后，我得到了验证字段并尝试更改最右侧列文本的代码。执行此操作的代码行是:

document.getElementById("Error1").innerHTML = "ERROR";

代码执行并正确检测到错误，删除了现有的文字，但没有出现新的文字。如果我查询 document.getElementById("Error1").innerHTML 的值，我会得到正确的文本，但它没有出现在屏幕上。

我使用的是 Safari v5.1.2，它适用于我从网上复制的基本示例，所以我认为这是我的代码而不是浏览器。

Answer 1

innerHTML 在 safari 中确实有效。看这个演示 http://jsfiddle.net/zxMKM/

明显的原因是您的 html 标记无效，浏览器会自行进行错误恢复并在此过程中生成自己的 DOM。
所以请验证您的 html http://validator.w3.org/

另请注意，td.innerHTML 仅适用于 IE8。
因此，使用 td.innerText

对跨平台更友好