以动态方式添加新元素的 JavaScript 代码

在学习浏览器的工作方式时，Javascript 是一种非常重要的语言。有时我们想向我们的网页添加动态元素/内容。这篇文章涉及所有这些。

创建新元素：在 JS 中可以使用createElement()方法创建新元素。

句法：

document.createElement("");  
// Where  can be any HTML 
// tagName like div, ul, button, etc.

// newDiv element has been created
For Eg: let newDiv = document.createElement("div");

创建元素后，让我们继续设置新创建元素的属性。

设置创建元素的属性：可以使用setAttribute()方法设置属性。

语法和示例如下：

Element.setAttribute(name, value);
// Where Element is the name of web element. 
// Here, we have created newDiv.
// Where name is the attribute name and 
// value is the value that needs to be set

For Eg: newDiv.setAttribute("class","container");

示例：可以基于某些事件（例如单击）创建元素。这是一个如何使用 onclick 事件动态创建元素的示例。这段代码可以进一步做成待办事项列表！

HTML

  

    
    
    
  
    
        html,
        body {
            height: 100%;
            width: 100%;
        }
  
        .button {
            display: flex;
            align-items: center;
            justify-content: center;
        }
  
        .tasks {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 20px;
        }
    

  

    
        Add task
    
    
    
  
        // Getting the parent element in which
        // the new div will be created
        let task = document.getElementsByClassName("tasks");
  
        // Getting the addTask button element
        let addTask = document.getElementById("addTask");
          
        // Adding onclick event to the button
        addTask.addEventListener('click', function () {
      
            // Traversing through collection of HTML
            // elements (tasks here)
            for (let i = 0; i < task.length; i++) {
                  
                // New div element is created  
                let newDiv = document.createElement("div");
                      
                // Setting the attribute of class type to newDiv 
                newDiv.setAttribute("class", "list");
                     
                // innerText used to write the text in newDiv 
                newDiv.innerText = "New Div created";
                       
                // Finally append the newDiv to the
                // parent i.e. tasks   
                task[i].append(newDiv);
            }
        })
    

  

输出：