HTML DOM innerHTML Property

Last Updated : 16 Jun, 2022

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>