How to append data to <div> element using JavaScript ? Last Updated : 11 Oct, 2019 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. Syntax: document.getElementById("div_name").innerText += "Your Data Here"; Example: html <!DOCTYPE html> <html> <head> <title> How to append data to div using JavaScript ? </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1 style="text-align:center;color:green;"> GeeksforGeeks </h1> <hr> <form> <div class="form-group"> <label for="">Enter Your Name:</label> <input id="name" class="form-control" type="text" placeholder="Input Your Name Here"> </div> <div class="form-group text-center"> <button id="my_button" class="btn btn-outline-success btn-lg" type="button"> Add Name </button> </div> </form> <h3>List of Names:</h3> <div id="my_div"></div> </div> <script> function append_to_div(div_name, data){ document.getElementById(div_name).innerText += data; } document.getElementById("my_button") .addEventListener('click', function() { var user_name = document.getElementById("name"); var value = user_name.value.trim(); if(!value) alert("Name Cannot be empty!"); else append_to_div("my_div", value+"\n"); user_name.value = ""; }); </script> </body> </html> Output: Before Adding the Data: After Adding the Data: Comment More infoAdvertise with us Next Article How to Combine multiple elements and append the result into a div using JavaScript ? S shubhamr238 Follow Improve Article Tags : Technical Scripter JavaScript Web Technologies Similar Reads How to append HTML code to a div using JavaScript ? 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 6 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 editable div using JavaScript ? In this article, we will be explaining to you how to create an editable div using HTML, CSS, and JavaScript. An editable div is one on which is you will click then it will generate an editable text area to edit or to write any text on your browser itself. After editing, when you click on somewhere e 3 min read Print the content of a div element using JavaScript If you want to print the content of a <div> element using JavaScript, you can achieve this by extracting the content and then opening a new window or popup to display and print it. This method involves capturing the content of the <div>, creating a new window, and using the print command 2 min read 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 3 min read 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 2 min read Like