Open In App
Related Articles

How to append HTML code to a div using JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

To append an HTML code to a div, we will first select the div element by using the DOM selector methods, then we will use the below-mentioned methods to append the HTML code to the div.

There are two ways to append HTML code to a div through JavaScript:

Using the innerHTML Attribute

To add HTML code to a div using the ‘innerHTML' attribute in JavaScript, select the div and simply use += to append the new code.

Syntax:

element.innerHTML += "additional HTML code"
// OR
element.innerHTML = element.innerHTML +
"additional HTML code"

Example: This example uses the above-explained approach to append the HTML code to a div using JavaScript.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to Append HTML Code to
        a Div using Javascript?
    </title>
 
    <style>
        body {
            text-align: center;
            padding: 5%;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <div id="add_to_me">
        <h1>GeeksforGeeks</h1>
        <p>
            This is the text which has
            already been typed into
            the div
        </p>
    </div>
 
    <button onclick="addCode()">
        Add Stuff
    </button>
 
    <script>
        function addCode() {
            document.getElementById("add_to_me")
                .innerHTML +=
                `<h3>
                    This is the text which has
                    been inserted by JS
                </h3>`;
        }
    </script>
</body>
 
</html>

                    

Output:

Note: This method basically destroys all the content of the div and recreates it. So, if you have any listeners attached to the child nodes of that div, they will be lost.

Using the insertAdjacentHTML() Method

HTML code can be appended to a div element using the insertAdjacentHTML() method. You need to pass the content after which the HTML code needs to be append inside the div tag and the code that need to be inserted.

Syntax:

elementInsideDiv.insertAdjacentHTML(
'afterend',
'additional HTML code'
);

Example: The below code example implements the insertAdjacent() method to append HTML in a div.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to Append HTML Code to
        a Div using Javascript?
    </title>
 
    <style>
        body {
            text-align: center;
            padding: 5%;
        }
 
        h1 {
            color: green
        }
    </style>
</head>
 
<body>
    <div id="add_to_me">
        <h1>GeeksforGeeks</h1>
 
        <p id="add_after_me">
            This is the text which has
            already been typed into
            the div
        </p>
    </div>
 
    <button onclick="addCode()">
        Add Stuff
    </button>
 
    <script>
        function addCode() {
            document.getElementById("add_after_me")
                .insertAdjacentHTML("afterend",
                    `<h3>
                        This is the text which has
                        been inserted by JS
                    </h3>`);
        }
    </script>
</body>
 
</html>

                    

Output:

Using the appendChild() method

The appendChild() method can be used to append the HTML inside a div tag by selecting it and operating the appendChild() method on it by passing the HTML as parameter to it.

Syntax:

selected_div_element.appendChild(HTML_to_append);

Example: The below code will explain the use of the appendChild() method to append the HTML to a div.

HTML

<!DOCTYPE html>
<html lang="en">
   
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>
        Append HTML to a div in JavaScript
    </title>
    <style>
        #conatiner{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="conatiner">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <h3>
            Click the below button to append the
            HTML to a Div.
        </h3>
        <button id="btn">Append HTML</button>
    </div>
    <script>
        const btn = document.getElementById('btn');
        function appendHTML(){
            const ele = document.getElementById('conatiner');
            const newDiv = document.createElement('div');
            newDiv.innerHTML = 
            `
                <h2>
                    Hey Geek,<br/>
                    Welcome to GeeksforGeeks!!
                </h2>
                <h3>
                    This is the HTML appended using the
                    appendChild() method in JavaScript.
                </h3>
            `;
            ele.appendChild(newDiv);
        }
        btn.addEventListener('click', appendHTML);
    </script>
</body>
   
</html>

                    

Output:

appendHTMLGIF

NOTE: You should never insert the HTML code in this way if you are taking it as input from the user. It opens your website to cross-site scripting vulnerabilities.

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.



Last Updated : 17 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads