HTML DOM innerHTML Property

Last Updated : 11 Jul, 2025

The innerHTML property sets or returns the HTML content (inner HTML) of an element. It allows you to manipulate the inner content, including HTML tags, by assigning new HTML strings or retrieving existing content, making it useful for dynamic updates on web pages.

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>

<head>
    <title>
        HTML DOM innerHTML Property
    </title>
</head>

<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:

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

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM innerHTML Property
    </title>
</head>

<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() {
            let x = document.getElementById("P").innerHTML;
            document.getElementById("p").innerHTML = x;
            document.getElementById("p").style.color = "green";
        }
    </script>
</body>

</html>