HTML DOM innerHTML Property (original) (raw)

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

HTML DOM innerHTML Property

GeeksforGeeks

DOM innerHTML Property

GeeksforGeeks

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

**Output:

innerHTML Property

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

HTML `

HTML DOM innerHTML Property

GeeksforGeeks

DOM innerHTML Property

A computer science portal for geeks.

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

**Output:

innerHTML Property

**Supported Browsers: The browser supported by DOM innerHTML property are listed below: