HTML DOM innerHTML Property

Last Updated : 19 Aug, 2026

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

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 
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->

    <button onclick="geek()">Click me!</button>
    <script>
        function geek() {
            document.getElementById("p").innerHTML =
                "A computer science portal for geeks.";
        }
    </script>

<!--Driver Code Starts-->
</body>

</html>
<!--Driver Code Ends-->

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

HTML 
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</body>

</html>
<!--Driver Code Ends-->
  • Reading element.innerHTML returns a string of the serialized HTML of all its descendants (excluding shadow roots). Setting it parses the given string as HTML and completely replaces all existing child nodes of the element.
  • Setting innerHTML with untrusted user input can execute malicious scripts. Modern best practice is to use Trusted Types, sanitize input, or prefer safer methods such as element.setHTML() / textContent when possible.
Comment

Explore