Question

我对JavaScript中.innerHTML和.value之间的区别感到困惑。这是我的代码：

<body>
Input string: <input type="text" id="input" />
....
</body>

当我使用这段代码时，我无法获得输入字符串的内容：

var str=document.getElementById("input").innerHTML;

虽然我使用以下代码，但它可以工作：

var str=document.getElementById("input").value;

任何人都知道它们之间有什么区别？

Answer 1

value指的是输入元素（或textearea）的值

<input value="hello world">

值为"hello world"（或内部输入的任何值）

innerHTML指的是HTML元素中的内容。

<div>
  <span class="hello">
     All tags and their children are include in innerHTML.
  </span>
  All this is part of innerHTML.
</div>

div标签的innerHTML将是字符串：

  '<span class="hello">
     All tags and their children are include in innerHTML.
  </span>
  All this is part of innerHTML.'

Answer 2

.innerHTML属性引用文字HTML标记，一旦被分配，解释并合并到当前文档的DOM（文档对象模型）中。另一方面，.value属性只是指通常是HTML输入控件的内容，例如文本框。并非每个HTML元素都支持input属性，而大多数（如果不是全部）都支持innerHTML属性。

Answer 3

.value为您提供表单元素的当前设置值（input，select，textarea），而.innerHTML基于元素包含的DOM节点构建HTML字符串。