How to append data to <div> element using JavaScript ?

How to append HTML code to a div using JavaScript ?

Last Updated : 23 May, 2025

The ability to append HTML code to a <div> Using JavaScript helps enhance user experience by enabling dynamic content updates without reloading the page. This technique is widely used—over 85% of modern websites implement JavaScript DOM manipulation to create smoother and more interactive web interfaces.

There are four simple ways to add HTML to a div using JavaScript:

Using the innerHTML Attribute
Using the insertAdjacentHTML() Method
Using the appendChild() Method
Using the append() Method

Let’s go through each method and see how they work.

1. Using the innerHTML Attribute

The innerHTML attribute is one of the most straightforward ways to append new HTML to a div. You simply access the innerHTML of the div and add the new HTML code to it using the += operator.

index.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:

Code Overview:

They dynamically adds content to a <div> when a button is clicked.
Initially, the div contains a heading and a paragraph.
When the "Add Stuff" button is clicked, a new <h3> element is appended to the div using JavaScript's innerHTML += method.

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.

2. Using the insertAdjacentHTML() Method

The insertAdjacentHTML() method method allows you to insert HTML into a div at specific positions. You can specify where you want the new content relative to the existing content.

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

Code Overview:

It adds a new <h3> element after the existing <p> element inside a div when the "Add Stuff" button is clicked.
It uses JavaScript's insertAdjacentHTML("afterend", ...) to insert the new content after the specified element (add_after_me).

3. Using the appendChild() Method

The appendChild() method allows you to append an actual HTML element to a div. This method works differently because you need to first create the new HTML element and then append it to the div.

index.html

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

Code Overview:

This HTML document adds new content to a <div> when a button is clicked.
It uses JavaScript to create a new <div>, adds HTML inside it, and appends it to the existing #conatiner div using appendChild().

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.

4. Using the append() Method

The append() method is a more modern way to append content. Unlike appendChild(), which only allows you to append DOM elements, append() can append both DOM nodes and text or HTML strings. It also allows you to append multiple nodes at once.

index.html

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GeeksforGeeks - Appending HTML with append()</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            color: #333;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        #container {
            margin-top: 50px;
            padding: 20px;
            background-color: #fff;
            border: 2px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 50%;
            margin-left: auto;
            margin-right: auto;
        }
        h1 {
            color: #4CAF50;
        }

        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 20px;
        }

        button:hover {
            background-color: #45a049;
        }

        p {
            color: #555;
        }
    </style>
</head>

<body>

    <div id="container">
        <h1>GeeksforGeeks</h1>
        <p>Click below to add new content!</p>
    </div>
    <button onclick="addContent()">Add New Content</button>
    <script>
        function addContent() {
            var container = document.getElementById('container');
            var newParagraph = document.createElement('p');
            newParagraph.textContent = 'New content added dynamically!';
            container.append(newParagraph);
        }
    </script>
</body>
</html>

Output

append-method- — append() Method

Code Overview:

This HTML page uses JavaScript to dynamically add content to a div.
When the "Add New Content" button is clicked, a new paragraph is created and appended to the #container div.
The page is styled with a clean, centered layout and a button that changes color on hover.

Note: 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.

Conclusion

Using JavaScript to dynamically add HTML content boosts website interactivity and improves the overall user experience. Methods like innerHTML, insertAdjacentHTML, appendChild(), and append() each offer unique advantages depending on the use case. Choosing the right method ensures efficient updates and helps maintain clean, responsive web applications.

How to append data to <div> element using JavaScript ?

J

JacobAntony1

Improve

Article Tags :

Similar Reads

How To Build Notes App Using Html CSS JavaScript ?

In this article, we are going to learn how to make a Notes App using HTML, CSS, and JavaScript. This project will help you improve your practical knowledge in HTML, CSS, and JavaScript. In this notes app, we can save the notes as titles and descriptions in the local storage, so the notes will stay t

How to Append Header to a HTML Table in JavaScript ?

JavaScript allows us to dynamically modify the structure of a table based on user interaction or other dynamic events. Here we will use JavaScript to dynamically create a Header row and then append it to the HTML table. ApproachIn this approach, we are using create elements along with DOM manipulati

How to Get the Content of an HTML Comment using JavaScript ?

In this article, we will learn how to get the content of an HTML Comment Using Javascript. Comments are a best practice in programming and software development. In general, they can explain why a coding decision was made or what needs to be done to improve the code you're working on. HTML tags (incl

How to append data to <div> element using JavaScript ?

To append the data to <div> element we have to use DOM(Document Object Model) manipulation techniques. The approach is to create a empty <div> with an id inside the HTML skeleton. Then that id will be used to fetch that <div> and then we will manipulate the inner text of that div.

How to make Live Coding Editor using HTML CSS and JavaScript ?

In this article, we will implement a live coding editor using HTML, CSS, and JavaScript. This project will allow you to write and execute HTML, CSS, and JavaScript code in real-time, making it an excellent tool for learning and testing your code snippets.Final OutputPrerequisiteHTMLCSSJavaScriptAppr

How to add HTML elements dynamically using JavaScript ?

We learn how to add HTML elements dynamically using JavaScript. A basic understanding of HTML, CSS, and JavaScript is required. Here we are going to use a button and by clicking this button, we can add an HTML element dynamically in this example. Below are the approaches used to add HTML elements dy

How to Change Text Inside all HTML Tags using JavaScript ?

In this article, we will learn how to change the text content inside all HTML tags using JavaScript. This skill is valuable when you need to dynamically modify the text displayed on a web page. which can be useful for various scenarios like updating content, internationalization, or creating dynamic

How to add/update an attribute to an HTML element using JavaScript?

To add/update an attribute to an HTML element using JavaScript, we have multiple approaches. In this article, we are going to learn how to add/update an attribute to an HTML element using JavaScript. Below are the approaches used to add/update an attribute to an HTML element using JavaScript: Table

How to Create an HTML Table from an Object Array Using JavaScript ?

Tables are a fundamental part of web development, and displaying data in a structured manner is a common requirement. JavaScript provides a powerful way to dynamically generate HTML content, making it easy to create tables from object arrays. Table of Content Using innerHTML propertyUsing appendChil

How to Combine multiple elements and append the result into a div using JavaScript ?

Combining multiple elements and appending elements to DOM is a crucial process, it would become a time-consuming process. If not handled properly so as a developer we should know how to update the DOM effectively. So following are the three ways to append HTML elements to DOM. The following methods