Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML DOM innerHTML Property

  • Last Updated : 15 Nov, 2021

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 1.0
  • Internet Explorer 5.5
  • Microsoft Edge 12.0
  • Firefox 45.0
  • Opera 9.6
  • Safari 3.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!