How to add html elements dynamically using Javascript?

Published in

featurepreneur

2 min readJan 15, 2022

Static Web pages belong to the stone age. These days even low level web pages are dynamic. Javascript is a very important language used in creating dynamic web pages.

Here we are going to use a button and by clicking this button, we can add an HTML element dynamically in this example.

Approach: Create 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.

Below is the implementation of the above approach:

<!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>
  Hello world
 </h1>
 <div id="innerdiv"></div>
 <button id="mybutton">
  click me
 </button>
 <script>
  document.getElementById("mybutton").
   addEventListener("click", function () {
  document.getElementById("innerdiv").
   innerHTML += "<h3>Hello world</h3>";
  });
 </script>
</body></html>

How to add html elements dynamically using Javascript?

Written by Mohith Aakash G