Статические веб-страницы относятся к каменному веку. В наши дни даже низкоуровневые веб-страницы являются динамическими. Javascript — очень важный язык, используемый при создании динамических веб-страниц.

Здесь мы собираемся использовать кнопку, и, нажав эту кнопку, мы можем динамически добавить элемент HTML в этом примере.

Подход: создайте HTML-файл с любым именем (например, index.html), затем напишите внешний HTML-шаблон и возьмите одну кнопку, чтобы при нажатии на кнопку HTML-код динамически добавлялся один за другим. в формате списка. Мы прикрепили прослушиватель событий onclick к кнопке, когда кто-то нажмет эту кнопку, сразу же событие сработает и выполнит функцию обратного вызова, прикрепленную к этому прослушивателю событий внутри функции обратного вызова, нам нужно упомянуть определенную задачу, которую мы хотим выполнить после onclick событие - пожар.

Ниже приведена реализация вышеуказанного подхода:

<!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>