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

Posted 2023-05-07

【中文标题】何时最好在元素的“值”上使用“innerText”，反之亦然？ HTML, JS

【英文标题】：When to use "innerText" over "value" of an element preferrably, and vice versa? HTML, JS

【发布时间】：2021-02-01 06:16:52

【问题描述】：

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

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

非常感谢您！

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

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

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

【问题讨论】：

无论如何你都应该使用.textContent 而不是innerText。通常，您应该避免使用innerHTML，因为它会触发昂贵的重新解析并会破坏 DOM 元素对象引用。

【参考方案1】：

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

唯一棘手的是button，这是唯一一个both value 和 文本的表单控件。 button 的 value 是如果该按钮提交其所在的表单时将提交的值。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>

【参考方案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。

【讨论】：

"value 指的是标签的属性" 不，它没有。它指的是表单控件的当前值，它根本不由任何属性表示。 （value 属性是表单控件的默认值，而不是其当前值。）

【参考方案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>*/

【讨论】：

value 的 button 可以与其文本不同。