JavaScript innerHTML (original) (raw)

Last Updated : 24 Apr, 2025

The **innerHTML property in JavScript is used to append the dynamic HTML or text content to an element using JavaScript. It is designed to add dynamic HTML, but developers also use it to add text content as well. It can be directly used with the element by selecting it using DOM manipulation.

Syntax:

selctedHTMLElement.innerHTML = "contentToAppend";

**Example 1: The below code shows a basic implementation of **innerHTML property to append HTML directly to an element.

HTML ``

<script>
    const container = document.getElementById('container');
    container.innerHTML += 
    `
        <h3>
            Hey Geek, <br/>
            Welcome to GeeksforGeeks
        </h3>
        <p>
            This content is added using the 
            innerHTML property.
        </p>
    `;
</script>

``

**Output:

**Example 2: The below code implements the **innerHTML property with click event to add HTML onclick to the button.

HTML ``

<script>
    const myBtn = document.getElementById('myBtn');
    function clickHandler() {
        const container = 
            document.getElementById('container');
        container.innerHTML +=
            `
            <h3>
                Hey Geek, <br/>
                Welcome to GeeksforGeeks
            </h3>
            <p>
                This content is added using 
                the innerHTML property.
            </p>
        `;
    }
    myBtn.addEventListener('click', clickHandler);
</script>

``

**Output: