0

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

我确实知道并且（认为我）理解它们之间的区别，但我还不知道何时更喜欢其中一个。这个问题有什么经验法则吗？有什么大的缺点/优点吗？

非常感谢您！

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

我实际上只是指“value”和“innerText”之间的不同用例，目的是将可见按钮文本设置为“Click Me！”。就在那个按钮上。你可以说，我正在为此寻找最佳实践规则。:)

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

4

3 回答 3

1

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

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

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>

于 2020-10-18T07:51:57.220 回答
0

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那个。

于 2020-10-18T07:53:04.020 回答
0

当您使用时，<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>*/
于 2020-10-18T07:56:16.860 回答