Javascript 何时使用；innerText“；超过；“价值”；更倾向于一个元素，反之亦然？HTML，JS

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

我确实知道并且（认为我）理解两者之间的区别，但我还不知道什么时候更喜欢其中一种。在这个问题上有什么经验法则吗？有什么好处吗

提前非常感谢

编辑： 谢谢你迄今为止的回答，哇，太快了！：） 只是为了澄清问题，避免误解——正如我上面所说，我的问题不是关于InnerHTML或TextContent，也不是关于所有其他可能的按钮文本获取方式

我实际上只是指“value”和“innerText”之间的不同用例，目标是在该按钮上设置一个可见的按钮文本为“clickme！”。我正在寻找这方面的最佳实践规则，你可以说：

---

我想，TJ Crowder回答得非常好，谢谢TJ，当然，也谢谢其他人的时间和帮助！：）由于我是这个平台的新手，我还不允许给你们这样的机会。所以请感受一下D谢谢

您仅在表单控件上使用

值

（

输入

，

按钮

，

选择

，以及

文本区域

）。对于任何其他元素，如果需要其文本，请使用

textContent

或

innerText

（或者，根据您的用例，

innerHTML

）

---

唯一棘手的是

按钮

，它是唯一一个既有

值

又有文本的表单控件。

按钮的
值
是当该按钮提交其所在表单时将提交的值。文本是用户看到的按钮标题。下面是一个例子：


const btn=document.querySelector（“按钮”）；
log（`按钮的值为：${btn.value}`）；
log（`按钮的textContent是：${btn.textContent}`）
四十二
值
表示标记的属性（基于文本的控件，如
、
等，以及许多
表单控件），而
innerHTML
表示标记开头和结尾之间的HTML内容

示例
myText
现在
oSpan.innerHTML
是
myText
。像这个文本框
现在
oText.value
是文本框中的
一些文本。
当您使用
时，您可以在按钮标签中使用html，如下所示：

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

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

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

document.getElementById（“myButton”）.innerHtml='单击我！'
/*
点击我！
*/
“
值
指的是标记的一个属性“不，它不是。它引用表单控件的当前值，该值根本不由任何属性表示。（属性是表单控件的默认值，而不是它的当前值。）无论如何，您应该使用
.textContent
而不是
innerText
。一般来说，您应该避免使用
innerHTML
，因为它会触发昂贵的重新分析，并会破坏DOM元素对象引用。
按钮的
值可以与其文本不同。
document.getElementById("inputButton").value = "Click Me!" //<input value="Click Me!" id="inputButton">

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