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

在本文中，我们将学习如何使用 JavaScript 动态添加 HTML 元素。需要对 HTML、CSS 和 javascript 有基本的了解。在这里，我们将使用一个按钮，通过单击此按钮，我们可以在此示例中动态添加一个 HTML 元素。

方法：创建一个任意名称的HTML文件（Ex-index.html），然后编写外层HTML模板并取一个按钮，这样当有人点击该按钮时，一个HTML就会以列表的形式一个一个地动态添加。我们在按钮上附加了一个 onclick 事件侦听器，当有人立即单击该按钮时，该事件将触发并在回调函数中执行附加到该事件侦听器的回调函数，我们需要提及我们希望在 onclick 后发生的某个任务事件是一场火灾。

下面是上述方法的实现：

index.html

  

    
        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;
        }
    

  

    
        GeeksforGeeks
    
    
    
        click me
    
    
        document.getElementById("mybutton").
            addEventListener("click", function () {
         document.getElementById("innerdiv").
            innerHTML += "<h3>Hello geeks</h3>";
        });
    

  

输出：