Article Categories

Selected Reading

How to find the text visible on the button with JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will discuss different approaches to find the text visible on the button with JavaScript. The text on a button shows what will happen if you click the button. To extract the text on the button, JavaScript provides us with the following two properties.

Using the innerHTML Property
Using the innerText Property

Let us discuss both of the above properties in detail.

Using the innerHTML Property

The innerHTML property not only allows us to get the text inside any tag but also allows us to set the text to any tag. This property returns the HTML content inside an element, including any nested tags. When getting text from a button, it will return both the text content and any HTML tags within it.

Syntax

let variable_name = document.getElementById("id").innerHTML;

The above syntax will extract the HTML content inside the element associated with the passed id.

Example 1: Basic Button Text

The below example will explain how to use the innerHTML property to extract the text inside the button tag:

<html>
<body>
   <button id="btn">Click me!</button>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let text = btn.innerHTML;
      document.getElementById("result").innerHTML = "The text visible on the button: <b>" + text + "</b>";
   </script>
</body>
</html>

The text visible on the button: Click me!

Example 2: Button with HTML Tags

The below example will show the behavior of the innerHTML property if the button contains any other tag inside it:

<html>
<body>
   <button id="btn"><b>Click me!</b></button>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let text = btn.innerHTML;
      document.getElementById("result").innerHTML = "The content inside button: " + text;
   </script>
</body>
</html>

The content inside button: <b>Click me!</b>

In this example, innerHTML returns the complete HTML content including the <b> tags.

Using the innerText Property

The innerText property returns only the visible text content of an element, excluding any HTML tags. Unlike innerHTML, it strips out all HTML markup and returns just the plain text that users can see on the page.

Syntax

let variableName = document.getElementById("id").innerText;

Example 3: Using innerText Property

The below example will illustrate the use of the innerText property to get text visible on the button:

<html>
<body>
   <button id="btn"><b>Click me!</b></button>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let text = btn.innerText;
      document.getElementById("result").innerHTML = "The text visible on the button: <b>" + text + "</b>";
   </script>
</body>
</html>

The text visible on the button: Click me!

Notice that innerText returns only the text content "Click me!" without the HTML <b> tags.

Comparison

Property	Returns HTML Tags?	Best Use Case
`innerHTML`	Yes	When you need the complete HTML content
`innerText`	No	When you only need the visible text

Conclusion

Use innerText to get only the visible text from buttons, and innerHTML when you need the complete HTML content. Both properties are useful for extracting button text in different scenarios.

Abhishek

Updated on: 2026-03-15T23:18:59+05:30

10K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next