何时最好在元素的“值”上使用“ innerText”，反之亦然？ HTML，JS

如何解决何时最好在元素的“值”上使用“ innerText”，反之亦然？ HTML，JS

假设我要构建一个带有文本的HTML按钮，例如“点击我！” -然后在我的JS应用中访问它。我可以将该按钮的文本设置为节点值或innerText（例如，我知道，也有innerHtml和InnerTextContent，但在这种情况下它们与我无关）-我尚未完全理解的是-我什么时候使用“ innerText”，什么时候使用“ value”，最好设置此文本？

我确实知道并且（认为我）理解了两者之间的区别，但是我还不知道何时选择一个或另一个。这个问题有什么经验法则吗？有什么大的缺点吗？

非常感谢您！

编辑： 到目前为止，感谢您的回答，哇，太快了！ :) 只是为了澄清事物并避免误解-正如我在上面所述，我的问题不是关于InnerHTML或TextContent或其他所有在按钮上获取文本的可能方式。

我实际上只是指“值”和“ innerText”之间的不同用例，目的是将可见按钮文本设置为“ Click Me！”。在该按钮上。您可以说，我正在为此寻找最佳实践规则。 ：）

我认为，TJ Crowder回答得非常好，谢谢TJ，当然还要感谢其他人的宝贵时间和帮助！ :)由于我是这个平台的新手，所以我还不能给你们个赞。所以请觉得。 ：D谢谢！

解决方法

您只能在表单控件（value，input，button和select）上使用textarea。对于任何其他元素，如果需要其文本，请使用textContent或innerText（或根据使用情况，使用innerHTML）。

唯一困难的是button，这是唯一同时具有 和value 和文本的表单控件。 value中的button是该按钮提交其所在表单时将要提交的值。 text 是用户视为按钮标题的内容。这是一个示例：

const btn = document.querySelector("button");
console.log(`The button's value is: ${btn.value}`);
console.log(`The button's textContent is: ${btn.textContent}`);

<button value="42">Forty-Two</button>

,

value是指标签的属性（基于文本的控件，例如<input type="text">，<textarea>等，还有许多<input>表单控件），而innerHTML指标签开始和结束之间的HTML内容。

示例<span id="oSpan">myText</span>现在oSpan.innerHTML是myText。就像这个文本框<input id="oText" value="some text"/>现在oText.value是文本框中的some text。

,

当您使用<button>时，可以在按钮标签内使用html，如下所示：

<button>
   <span>
      Click Me!
   </span>
</button>

但是当您使用时。您不能使用html inside标记，因为它是一个自闭合标记，并且只能设置值：

<input value="Click Me!" />

在javaScript中，当您设置value时，您正在设置所选DOM元素的value属性（如果它具有'value'属性）。

document.getElementById("inputButton").value = "Click Me!" //<input value="Click Me!" id="inputButton">

但是使用innerHtml，您可以在选定的DOM元素内设置HTML：

document.getElementById("myButton").innerHtml = '<span>Click Me!</span>' 
/*<button id="myButton">
   <span>Click Me!</span>
</button>*/