How to adjust CSS for specific zoom level?

How to append HTML code to a div using JavaScript ?

Last Updated : 15 Apr, 2025

Updating content on a webpage without reloading the entire page makes for a faster and smoother user experience. JavaScript allows you to do this by adding new HTML to elements like divs dynamically.

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.

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:

In this code

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.

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

In this code

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.

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

In this code

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.

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

In this code

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.

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

Dynamically adding HTML content to a webpage using JavaScript enhances interactivity and provides a seamless user experience. Whether you use methods like innerHTML, insertAdjacentHTML, appendChild(), or the more flexible append(), each method has its own advantages and best-use scenarios.

How to adjust CSS for specific zoom level?

J

JacobAntony1

Improve

Article Tags :

Similar Reads

How to create Text Editor using Javascript and HTML ?

The style property in JavaScript is used to create a text editor with HTML and CSS. This editor features buttons for text formatting, including options for bold, italic, left, center, and right alignment, as well as uppercase, lowercase, and capitalized transformations. Each button triggers a functi

How to Add Edit and Delete Data in HTML Table using JavaScript?

To add edit and delete features in an HTML table with JavaScript, create buttons for each action. Use JavaScript functions to add new rows, edit existing data, and remove rows as needed. Approach to Add Edit and Delete DataThe addData() method obtains the data from the input fields and creates a fre

How to add a tooltip to a div using JavaScript?

Adding tooltip to div element displays a pop-up, whenever the mouse hovers over div. Syntax: < div title = "" > </div> <script> $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); }); </script> Tooltip Methods: .tooltip("show"): It is us

How to sort an HTML list using JavaScript ?

In this article, we are given a list of elements and the task is to sort them alphabetically and put each element in the list with the help of JavaScript. We have a method to sort an HTML list using JavaScript that are described below: insertBefore() method insertBefore() method: The insertBefore()

How To Build Notes App Using Html CSS JavaScript ?

In this article, we are going learn how to make a Notes App using HTML, CSS, and JavaScript. This project will help you to 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 th

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 get HTML content of an iFrame using JavaScript ?

The <iframe> tag specifies an inline frame. It allows us to load a separate HTML file into an existing document. Code snippet:function getIframeContent(frameId) { let frameObj = document.getElementById(frameId); let frameContent = frameObj. contentWindow.document.body.innerHTML; alert("frame c

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 create a moving div using JavaScript ?

In this article, we will learn to create a moving HTML div using JavaScript. The div will move left to right using HTML, CSS, and JavaScript. Approach: We have to create an HTML div and add some CSS to the div using a glass ball. In CSS, we add some background-color to the body and give some height,