To change the text content of any element, you can make use of innerText or textContent property. The innerText property is best suited when you want to change the text that is visible to the user. The textContent property should be used when you want to change both the visible and invisible text content of an element.
In the following example, we have a button element and we want to change its text upon click. Please have a look over the code example and steps given below.
HTML & CSS
We have 3 elements in the HTML file (div, button, and h1). The div element is just a wrapper for the rest of the elements.
The button element has “Send Message” as its inner text.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.