How to add HTML elements dynamically using JavaScript ? Last Updated : 16 Jan, 2024 Comments Improve Suggest changes Like Article Like Report 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 dynamically using JavaScript : Table of Content Using innerHTMLUsing appendChild() methodApproach 1: Using innerHTMLCreate an HTML file with any name (Ex- index.html) then write the outer HTML template and take one button so that when someone clicks on the button, an HTML is dynamically added one by one in a list format. We have attached an onclick event listener to the button, when someone clicks that button immediately the event will fire and execute the callback function attached to that event listener inside the callback function we need to mention a certain task that we want to happen after an onclick event is a fire. Example: Below is the implementation of the above approach: HTML <!DOCTYPE html> <html> <head> <style> h1 { color: green; display: flex; justify-content: center; } #mybutton { display: block; margin: 0 auto; } #innerdiv { display: flex; flex-direction: column; justify-content: center; align-items: center; } </style> </head> <body> <h1> GeeksforGeeks </h1> <div id="innerdiv"></div> <button id="mybutton"> click me </button> <script> document.getElementById("mybutton"). addEventListener("click", function () { document.getElementById("innerdiv"). innerHTML += "<h3>Hello geeks</h3>"; }); </script> </body> </html> Output: Approach 2: Using appendChild() methodThe HTML DOM appendChild() Method of the node interface, is used to create a text node as the last child of the node. This method is also used to move an element from one element to another element. It is used for creating a new element with some text then first create the text as the text node and then append it to the element, then append the element to the document. Syntax:node.appendChild(node);Example: We will see the use of the appendChild() method HTML <!DOCTYPE html> <html> <head> <style> h1 { color: green; display: flex; justify-content: center; } #mybutton { display: block; margin: 0 auto; } div { display: flex; flex-direction: column; justify-content: center; align-items: center; } </style> </head> <body> <h1> GeeksforGeeks </h1> <div id="innerdiv"></div> <button onclick="mybutton()" id="mybutton">Click Me</button> <script> function mybutton() { const para = document.createElement("div"); para.innerText = "Hello Geeks"; document.body.appendChild(para); } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to add HTML elements dynamically using JavaScript ? debadebaduttapanda7 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to dynamically create new elements in JavaScript ? New elements can be dynamically created in JavaScript with the help of createElement() method. The attributes of the created element can be set using the setAttribute() method. The examples given below would demonstrate this approach. Example 1: In this example, a newly created element is added as a 4 min read How to dynamically insert id into table element using JavaScript ? This article explains how to dynamically insert "id" into the table element. This can be done by simply looping over the tables and adding "id"s dynamically. Below are the approaches used to dynamically insert id into table elements using JavaScript: Table of Content Using classList ObjectUsing clas 3 min read How to Create an Image Element using JavaScript? Creating an image element dynamically using JavaScript is a useful technique when you want to add images to a webpage without having to manually write the <img> tag in your HTML. This allows for more flexibility, as we can create and manipulate images based on user interactions or other condit 2 min read How to create XML Dynamically using JavaScript? XML stands for Extensible Markup Language. It is a popular format for storing and exchanging data on the web. It provides a structured way to represent data that is both human-readable and machine-readable. There are various approaches to create XML Dynamically using JavaScript: Table of Content Usi 2 min read 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 2 min read How to Dynamically Add Select Fields Using jQuery? Select Fields can be added dynamically using jQuery. This increases the flexibility and interactivity of web forms, allowing users to add or remove options as needed. In this article, we will learn two different approaches to Dynamically Add Select Fields Using jQuery. These are the following approa 3 min read How to Add JavaScript in HTML Document? To add JavaScript in HTML document, several methods can be used. These methods include embedding JavaScript directly within the HTML file or linking an external JavaScript file.Inline JavaScriptYou can write JavaScript code directly inside the HTML element using the onclick, onmouseover, or other ev 3 min read How to add an element horizontally in Html page using JavaScript? There can be some cases where we have the requirement to add elements in a horizontal manner. Like, if your elements are linked list nodes and you want to add them horizontally. Now the question arises how we can do this in better way.One approach can be to use âdisplayâ property with the value âinl 3 min read Dynamic HTML Using Handlebars JavaScript The Dynamic HTML Using Handlebars JavaScript consists of creating the user interactive web pages by combining the HTML with the Handlebars templating engine. The Handlebars mainly ease the process of dynamically rendering the HTML content by allowing the insertion of variables, expressions, and logi 3 min read 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. 1 min read Like