何时最好使用"innerText"超过元素的"value"，反之亦然？HTML， JS

Question

假设我想构建一个带有文本的HTML按钮，比如"点击我"-然后在我的JS应用程序中访问它。例如，我可以将该按钮的文本设置为节点值，或设置为innerText(我知道，还有innerHtml和InnerTextContent，但在这种情况下，它们与我无关(-我还没有完全理解的是-我什么时候使用"；innerText"；，我什么时候使用"；值"；，设置这个文本，好吗？

我确实知道(我想我(也理解两者之间的区别，但我还不知道什么时候该选择其中之一。这个问题有什么经验法则吗？有什么大的缺点/优点吗？

提前非常感谢！

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

我实际上只是指"；值"；以及"；innerText"；目的是将可见按钮文本设置为"显示"；点击我"就在那个按钮上。你可以说，我正在为此寻找最佳实践规则。：(

我认为，TJ Crowder回答得很好，谢谢TJ，当然，也感谢其他人的时间和帮助！：(由于我是这个平台的新手，我还不能给你们点赞。所以请感受一下D谢谢！

Answer 1

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

唯一棘手的是button，它是唯一一个同时具有value和文本的表单控件。button的value是如果该按钮提交其所在的表单时将提交的值。文本是用户认为的按钮标题。这里有一个例子：

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>

Answer 2

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。

Answer 3

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

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

但是当你使用的时候。你不能在标签中使用html，因为它是一个自关闭标签，你只能设置值：

<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>*/