如何在 jQuery 中创建一个 div 元素？

有多种方法可以使用 JQuery 在 HTML 文档中创建 HTML 元素。但最简单的是append()和prepend()方法。

方法一：使用 prepend() 方法： prepend() 方法用于在被选元素的开头插入指定的内容。

示例：本示例使用 prepend() 方法在所选元素的开头创建 div 元素。

      

    Create div element
      
     
     
      
    
    
        $(document).ready(function() {
          
            // Select the element inside div
            // element will be added
            $("body")
              
            .prepend('<div class="added">This is added div </div>');
        });
    
      
    
    
        div {
            padding: 20px;
            margin-bottom: 10px;
            border: 1px solid green;
            display: inline-block;
        }
    

  

    
        This is initial div
    
                    

输出：

方法二：使用 appendTo() 方法： jQuery 中的 appendTo() 方法用于在被选元素的末尾插入 HTML 元素。

示例 1：本示例使用 appendTo() 方法在所选元素的末尾创建 div 元素。

      

    Create div element
      
     
     
      
    
    
        $(document).ready(function() {
            $("<div>This is another added div</div>").appendTo("body");
        });
    
      
    
    
        div{
            padding: 20px;
            margin-bottom: 10px;
            border: 1px solid green;
            display: inline-block;
        }
    

  

    
    This is initial div
    

  
                    

输出：

示例 2：此示例使用 appendTo() 方法在 div 元素内创建 div 元素。

      

    Create div element
      
     
     
      
    
    
        $(document).ready(function() {
            jQuery("<div/>", {
                id: "div-id",
                class: "div-class",
                text: "This is text of div"
            }).appendTo(".box");
        });
    
      
    
    
        div {
            padding: 20px;
            margin-bottom: 10px;
            border: 1px solid green;
            display: inline-block;
        }
    

  

    
        This is initial div
    
      
    

  
                    

输出：