Understanding innerText vs. innerHTML with a Practical Example

Here's a practical example Highlighting the key differences between innerText and innerHTML in JavaScript.

<!DOCTYPE html>
<html>
<head>
  <title>innerText vs innerHTML</title>
</head>
<body>
  <div id="content">
    <p>Hello, <strong>world!</strong></p>
  </div>

  <button onclick="showInnerText()">Show innerText</button>
  <button onclick="showInnerHTML()">Show innerHTML</button>

  <p id="result">Output will appear here...</p>

  <script>
    const contentDiv = document.getElementById("content");
    const result = document.getElementById("result");

      function showInnerText() {
          result.innerText = contentDiv.innerText;
      }

      function showInnerHTML() {
          result.innerText = contentDiv.innerHTML;
      }
  </script>
</body>
</html>

Try it

innerText returns Hello, World!. It only includes the visible text without the HTML tags.

innerHTML retunrs <p>Hello, <strong>world!</strong></p>, the full markup, tags and all.

👉 Learn more about the difference between innerText and innerHTML in detail.

← PreviousNext →