设置innerHTML与使用Javascript设置值

Setting innerHTML vs. setting value with Javascript

本文关键字：设置 Javascript innerHTML      更新时间：2023-09-26

当您想使用Javascript来更改HTML时，如何知道何时使用以下任一项？

document.getElementById("randomNumber").value = number;
document.getElementById("randomNumber").innerHTML = number;

设置value通常用于输入/表单元素。innerHTML通常用于div、span、td和类似元素。

下面是一个显示ID.value使用的链接：http://www.javascript-coder.com/javascript-form/javascript-form-value.phtml

value用于表单元素，如果要设置任何其他元素的内容，则为innerHTML
如果你想设置文本内容，还有innerText（你不必转义其中的任何内容，但其中没有HTML）

value通常是特定i/o元素的属性，例如input元素（也包括type="hidden"）。

不是div, p, a, etc.的元素通常甚至不具有value属性，即使设置了value，也不会影响最终输出。

value仅适用于具有value属性的对象（通常为表单控件）。

innerHtml适用于所有可以包含HTML的对象（div、span，以及许多其他控件和表单控件）。

它们不是等效的或可替换的。取决于你想要达到的目标。。。

value表示input元素的GETed或POSTed值。CCD_ 16可以改变内容的实际元素。

值用于输入

div和span 的innerHTML

对他来说有点晚了，但我也在寻找答案，我认为根据Skyrim的答案做这样的事是可能的感谢

function enterValue() {
  var childNodes = document.body.childNodes;
  for (x of childNodes) {
    if(x.nodeName=="INPUT"){
      // element is an INPUT html tag
      x.value = "my input value";
    }else{
      // element is anything other than an INPUT
      x.innerHTML  = "my input value";
    }
  }
}
<!DOCTYPE html>
<html>
<body>
<input name="mInput" />
<div></div>
<p id="demo"></p>
<input type="button" onclick="enterValue()" value="enterValue">
</body>
</html>

使用.innerHTML将元素的整个内部主体替换为指定的有效HTML。一个很好的例子是，如果发生事件，将嵌套的div放置在已经存在的div中。

将.value用于请求值的表单元素，例如文本输入。

相关文章：