jQuery | append() 方法

jQuery 中的这个append() 方法用于在被选元素的末尾插入一些内容。

句法：

$(selector).append( content, function(index, html) )

参数：此方法接受上面提到和下面描述的两个参数：

• content：必选参数，用于指定要插入到所选元素末尾的内容。内容的可能值是 HTML 元素、jQuery 对象和 DOM 元素。
• 函数(index, html)：可选参数，用于指定返回插入内容的函数。
  • index：用于返回元素的索引位置。
  • html：用于返回被选元素的当前HTML。

示例 1：本示例将内容附加到段落和列表的末尾。

      

    
        jQuery append() Method
    
      
    
    
      
    
    
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("p").append(" <b>Append Geeks</b>.");
            });
            
            $("#btn2").click(function(){
                $("ol").append("<li>Append Gfg</li>");
            });
        });
    

  

    Geeks
      
    GeeksforGeeks
    Jquery
   
    
        Gfg 1
        Gfg 2
        Gfg 3
    
   
    Append Geeks
    Append Gfg

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  
  

示例 2：本示例将内容附加到段落末尾。

      

    
        jQuery append() Method
    
      
    
    
      
    
    
        $(document).ready(function() {
            $("button").click(function() {
                $("p").append(function(n) {
                    return "<b>   Index of Element is "
                            + n + ".</b>";
                });
            });
        });
    

  

    Geeks
      
    Geeks for Geeks
    Jquery_append
   
    
        Insertion using Append Method()
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：