如何在 JavaScript 中动态创建新元素？

借助 createElement() 方法，可以在 JavaScript 中动态创建新元素。可以使用 setAttribute() 方法设置所创建元素的属性。下面给出的示例将演示这种方法。

示例 1：在此示例中，将新创建的元素作为子元素添加到父元素。指定要创建的元素的类型，并添加其值或指定元素的文本节点。

HTML

  

    
        How to dynamically create 
        new elements in JavaScript?
    

  

    
        GeeksForGeeks
    
  
    
    
  
        
        
            Add Element Type
        
  
        
        
  
        
        
            Add Element Value
        
  
        
        
  
        
        
            Add
        
    
  
    
    
        List Item 1
    
  
    
  
        // Define the addItem() function
        // to be called through onclick
        function addItem() {
  
            // Get type of element from form
            let type = document.
                getElementById("type").value;
  
            // Get the text/value for the tag
            // from the form
            let value = document.
                getElementById("value").value;
  
            // createElement() is used for
            // creating a new element
            type
                = document.createElement(type);
  
            // Use value as textnode in this example
            type.appendChild(
                document.createTextNode(value));
  
            // Append as child to the parent
            // tag i.e. ol
            document.getElementById(
                "parent").appendChild(type);
        }
    

  

输出：

在点击按钮之前：

点击按钮后：

示例 2：在此示例中，将新创建的元素及其属性添加到页面的 body 元素中。只能使用两个参数输入属性，即属性类型和属性值。为方便起见，添加了“子”项的 CSS。

html

  

    
        How to dynamically create 
        new elements in JavaScript?
    
  
    
        /* CSS for child item */
        .child {
            color: white;
            background-color: green;
        }
    

  

    
        GeeksForGeeks
    
    
    
  
        
         
            Add Element Type
        
  
        
        
  
        
         Add Element Value
  
        
        
  
        
         Add Attributes
        
            Add Attribute Type
            
  
            
            
            
                Add Attribute Value
            
            
        
        
  
        
        
            Add
        
    
  
    
        CHILD 1
    
  
    
  
        // Define the addItem function
        // to be called through onclick()
        function addItem() {
  
            // Get Elements by id of the form inputs
            let parent = 
                document.getElementById("body");
  
            let attrType = 
                document.getElementById("attrType");
  
            let attrValue = 
                document.getElementById("attrValue");
            let type = document.getElementById("type");
            let value = document.getElementById("value");
  
            if (type.value == "" || value.value == "") {
                window.alert(
                    "There is an error in form input");
                window.reload();
            }
  
            // createElement() method is used
            // to create a new element
            type = document.createElement(type.value);
  
            // Append a text node for this example
            type.appendChild(
                document.createTextNode(value.value));
  
            if (attrValue.value == "" 
                    || attrType.value == "") {
                attr = null;
            }
            else {
                // setAttribute() is used to set
                // the attributes of the element
                type.setAttribute(
                    attrType.value, attrValue.value);
            }
  
            // Append as child to the parent
            // i.e. body
            parent.appendChild(type);
        }
    

  

输出：
在点击按钮之前：

点击按钮后：