如何使用 JavaScript 动态添加 HTML 元素?

javascriptweb developmentfront end technology

在本文中，我们将探讨如何动态添加 HTML 元素，以便它们可以更改视图组件。不仅仅是 HTML 元素，我们还可以借助 JavaScript 向 HTML 元素添加 CSS 属性。在本文中，我们将使用按钮来方便在已构建的模板中添加 HTML 元素。

方法

我们将创建一个定义了一些组件的简单 HTML 页面。
创建页面后，我们将编写一些外部 HTML 并向其添加一个按钮，以便当用户单击按钮时我们可以添加此 HTML。
此 HTML 以列表格式逐个动态添加。
我们将编写一个附加到 onclick 事件的 JavaScript 函数。此事件将监听触发器并将所需的 HTML 添加到页面。
我们还将创建一个回调，告诉我们 HTML 元素是否已成功添加。

示例

在下面的示例中，我们将通过单击按钮添加 HTML 元素。每当单击按钮时，我们都会将 HTML 元素添加到已创建的页面。

# index.html

<!DOCTYPE html>
<html>
<head>
   <title>Adding HTML elements dynamically</title>
   <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>
      Welcome To Tutorials Point
   </h1>
   <div id="innerdiv"></div>
   <button id="mybutton">
      Click to Add HTML element
   </button>
   <script>
      document.getElementById("mybutton").
      addEventListener("click", function () {
         document.getElementById("innerdiv").innerHTML += "<h3>Hello User</h3><p>Start your learning journey today.</p>";
      });
   </script>
</body>
</html>