JavaScript innerHTML

Last Updated : 02 Feb, 2024

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <title>
        JavaScript innerHTML
    </title>
    <style>
        #container{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h2>
            The below content is added dynamically
            using the innerHTML property in JavaScript.
        </h2>
    </div>  
     
    <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>
</body>
</html>

Output:

innerHTMLOP

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

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <title>
        JavaScript innerHTML
    </title>
    <style>
        #container {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h2>
            Click the below button to dynamically add
            the HTML using the innerHTML property.
        </h2>
        <button id="myBtn">Add HTML</button>
    </div>
 
    <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>
</body>
 
</html>