Open In App
Related Articles

HTML DOM innerHTML Property

Improve Article
Improve
Save Article
Save
Like Article
Like

The DOM innerHTML property is used to set or return the HTML content of an element.

Syntax:

It returns the innerHTML Property.

Object.innerHTML

It is used to set the innerHTML property.

Object.innerHTML = value

Where,

  • value: It represents the text content of the HTML element.

Return Value: This property returns a string that represents the HTML content of an element.

Example 1: This example shows how to change the content of the paragraph tag using the innerHTML property. 

HTML




<!DOCTYPE html>
<html>
 
<body style="text-align: center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>
        DOM innerHTML Property
    </h2>
    <p id="p">GeeksforGeeks</p>
 
 
    <button onclick="geek()">Click me!</button>
    <script>
    function geek() {
        document.getElementById("p").innerHTML =
        "A computer science portal for geeks.";
    }
    </script>
</body>
 
</html>


Output:

innerHTML Property

Example 2: This example shows how to get the value of the paragraph tag using the innerHTML property.

HTML




<!DOCTYPE html>
<html>
 
<body style="text-align: center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>
        DOM innerHTML Property
    </h2>
    <p id="P">A computer science portal for geeks.</p>
 
 
    <button onclick="geek()">Try it</button>
    <p id="p"></p>
 
 
     
    <script>
    function geek() {
        var x = document.getElementById("P").innerHTML;
        document.getElementById("p").innerHTML = x;
        document.getElementById("p").style.color = "green";
    }
    </script>
</body>
 
</html>


Output:

innerHTML Property

Supported Browsers: The browser supported by DOM innerHTML property are listed below:

  • Google Chrome 33.0 and above
  • Internet Explorer 4 and above
  • Microsoft Edge 12.0 and above
  • Firefox 1.0 and above
  • Opera 8.0 and above
  • Safari 9.0 and above

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 16 Jun, 2022
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials