When to use "innerText" over "value" of an element preferrably, and vice versa? HTML, JS

Question

let's say I want to build an HTML button with a text on it, like "Click me!" - and then access it in my JS app. I could set the text of that button as a node value, or as innerText, for example (I know, there are also innerHtml and InnerTextContent, but those are irrelevant for me in this case) - What I did not yet fully understand is - When do I use "innerText", when do I use "value", to set this text, preferrably?

I do know and (think I) understand the difference between them both, but I don't know yet when to prefer the one or the other. Is there anything like a rule of thumb for this issue? Any great dis-/advantages?

Thank you very much in advance!

Edit: Thanks for your answers so far, wow that was fast! :) Just to clarify things and avoid misunderstandings - as I said above, my question is not about InnerHTML or TextContent or all the other possible ways to get text on a button.

I am really only referring to the different usecases between "value" and "innerText" with that goal to set a visible button text as "Click Me!" right on that button. I am looking for a best practice rule for this, you could say. :)

I think, TJ Crowder answered this really well, thank you TJ and of course, thank you anybody else for your time and help! :) As I am new to this platform, I am not yet allowed to give you guys a like. So FEEL it please. :D Thanks!

Answer 1

You only use value on form controls (input, button, select, and textarea). For any other element, if you want its text, use textContent or innerText (or, depending on your use case, innerHTML).

The only tricky one there is button, which is the only form control that has both a value and text. The value of a button is the value that will be submitted if that button submits the form it's in. The text is what the user sees as the button caption. Here's an example:

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 refers to an attribute of a tag (Text based controls like <input type="text">, <textarea> etc. And many <input> form controls), while innerHTML refers to the HTML content between a tag's beginning and end.

Example <span id="oSpan">myText</span> now oSpan.innerHTML is myText. And like this textbox <input id="oText" value="some text"/> now oText.value is the some text which is in the textbox.

Answer 3

when you use <button> you can use html inside button tag same as follow:

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

but when you use . you cant use html inside tag because it is a self closing tag and you can only set the value :

<input value="Click Me!" />

In javaScript when you set value, you are setting the value attribute of your selected DOM Element if that has 'value' attribute.

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

but with innerHtml you set HTML inside your selected DOM Element:

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