innerHTML 在 Firefox 中无法正常工作？答案

【问题标题】：innerHTML not working properly in firefox?innerHTML 在 Firefox 中无法正常工作？
【发布时间】：2015-01-12 09:43:08
【问题描述】：

我正在使用 javascript 设置表单字段的值。现在，当我使用 innerHTML 选择该字段的 HTML 内容时，该值消失了。这是代码。

function test() {
  document.getElementById("fname").value = "Deepak";
}

function test2() {
  alert(document.getElementById("testform").innerHTML);
}

<form id="testform">
  <input type="text" name="fname" id="fname">
</form>
<input type="button" value="Set Value" onclick="test()">
<input type="button" value="Show Inner HTML" onclick="test2()">

我不能在这个中使用 jquery，所以只能使用 JS 来做。输出应该是<input name="fname" id="fname" type="text" value="Deepak"> 但目前它显示，<input name="fname" id="fname" type="text">

有什么办法可以解决这个问题吗？这在 IE 上运行良好。

【问题讨论】：

你想要完成什么？字段值的变化不一定反映在它们的 DOM 属性中。
@JLRishe：将字段的值设置为Deepak后为什么innerHTML不获取它？
输入值不是 HTML 的一部分。 HTML 仅包含原始值，不包含修改后的值。
如果要更改 HTML 中的值，请使用 .setAttribute('value', 'Deepak')。
@Barmar：非常感谢。它现在按预期工作。你拯救了我的一天。

标签： javascript jquery html innerhtml

【解决方案1】：

您在 FireFox 中观察到的行为是正确的行为。更改输入的值不应更改其value 属性（如果它甚至有一个）。较新版本的 IE 与 FireFox 的行为方式相同，而较旧版本的 IE 存在您的代码所依赖的错误。你可以在DOM level 2 spec看到这个：

更改 [value 属性] 会更改表单控件的内容，但不会更改元素的 HTML value 属性的值。

如果我没记错的话，你应该可以将 DOM 节点直接传递给Modalbox.show()：

Modalbox.show(document.getElementById('RAForm'), {title: 'Create RA', width:700});

所以请尝试一下。我相信这应该可以解决您的问题。

【讨论】：