getElementById innerHTML 对我不起作用？ [复制]答案

【问题标题】：getElementById innerHTML not work for me? [duplicate]getElementById innerHTML 对我不起作用？ [复制]
【发布时间】：2015-02-19 06:26:06
【问题描述】：

getElementById innerHTML 对我不起作用？

当用户在输入标签中填写数据时，它会被更改为Hello!

http://jsfiddle.net/59DFY/21/

<input type="text" id="hola" onchange="changeMe()">
<script>
function changeMe() {
  document.getElementById("hola").innerHTML="Hello!";
}
</script>

【问题讨论】：

输入字段的值不是innerHTML

标签： javascript

【解决方案1】：

您需要使用value。它将“更改”输入元素上的内部 HTML，但它不会显示在屏幕上，因为它是一个 void 元素。它在技术上没有innerHMTL，但浏览器会做类似<input ...>Hello!</input> 的事情。 input 元素的文本使用 value 而非 innerHTML，例如 <p> 或 <div> 将使用。

function changeMe() {
    document.getElementById("hola").value="Hello!"; 
}

【讨论】：

"它会改变输入元素的内部 HTML" - 不，它不会。问题具体在于<input /> 元素是一个无效或被替换的元素：它没有内部 HTML，它不能包含任何类型的任何子节点。
@DavidThomas 实际上确实如此。在 input 上更改内部 HTML 将使其看起来像这样：<input ...>Hello!</input>。但它没有显示在屏幕上。
它不显示在屏幕上的原因是：“ 元素是一个无效的或被替换的元素：它没有内部 HTML ，它不能包含任何类型的任何子节点。”分配属性 (innerHTML) 不会赋予您提出的解决方案任何能力或有效性。
@DavidThomas 我想我明白你的意思，当我说“内部 HTML”时，我不是在谈论属性，而是浏览器做了什么。我已经改变了我的答案，所以我更清楚了。
@robert dewo 如果您通过检查元素看到它，它就会起作用。您的代码是正确的。

【解决方案2】：

使用输入文本的value属性。

value 属性设置或返回文本字段的 value 属性的值。

value 属性包含默认值或用户输入的值（或脚本设置的值）。

所以试着像这样改变它

function changeMe() {
  document.getElementById("hola").value ="Hello!";
}

http://jsfiddle.net/59DFY/21/

【讨论】：