Статические веб-страницы относятся к каменному веку. В наши дни даже низкоуровневые веб-страницы являются динамическими. 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>