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:
