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:
<!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= </head> <body> <div class="container"> <h1 style="text-align:center;color:green;"> neveropen </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:
