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

在本文中，我们将探讨如何动态添加 **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>