Horje
JavaScript innerHTML

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>

Output:

onclickGIF


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
How to Replace an Object in an Array with Another Object Based on Property ? How to Replace an Object in an Array with Another Object Based on Property ?
Driver.js a JavaScript Framework Driver.js a JavaScript Framework
What are JavaScript Events ? What are JavaScript Events ?
JavaScript Exercises, Practice Questions and Solutions JavaScript Exercises, Practice Questions and Solutions
How to create a Popup Form using HTML CSS and JavaScript ? How to create a Popup Form using HTML CSS and JavaScript ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 15



 

Horje