HTML

Last Updated : 26 Mar, 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 represents the text content of HTML element.
Return Value: This property returns a string which represents the HTML content of an element.

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

<!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:
Before clicking the button:

innerHTML

After clicking the button:

innerHTML

Example-2: This example shows how to get the value of paragraph tag using 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>