如何使用 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>