innerHTML JavaScript | DOM Property

  • by

The innerHTML property is used in JavaScript sets or returns the HTML content (inner HTML) of an element. It can be used to write the dynamic HTML on the html document.

Return the innerHTML property:

HTMLElementObject.innerHTML

Set the innerHTML property:

 HTMLElementObject.innerHTML = value

To insert the HTML into the document rather than replace the contents of an element, use the method insertAdjacentHTML().

Example innerHTML JavaScript

Simple example code Get the HTML content of a <p> element with id=”myName”:

<!DOCTYPE html>
<html>
<body>

  <p id="myName">EyeHunts Tutorial</p>
  <button onclick="myFunction()">Get MSG</button>

  <script>
    function myFunction() {
      var x = document.getElementById("myName").innerHTML;
      alert(x)
    }
  </script>

</body>
</html>

Output:

innerHTML JavaScript

Set the HTML content of a <p> element with id=”demo”:

<body>

  <p id="demo">EyeHunts Tutorial</p>
  <button onclick="myFunction()">Change</button>

  <script>
    function myFunction() {
     document.getElementById("demo").innerHTML = "Hello";
   }
 </script>

</body>

Do comment if you have any doubts or suggestions on this JS HTML topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.