Skip to content
Related Articles

Related Articles

jQuery | append() Method
  • Last Updated : 19 Feb, 2019

This append() Method in jQuery is used to insert some content at the end of the selected elements.

Syntax:

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

Parameters: This method accepts two parameters as mentioned above and described below:

  • content: It is required parameter and used to specify the content which is to be inserted at the end of selected elements. The possible value of contents are HTML elements, jQuery objects and DOM elements.
  • function(index, html): It is optional parameter and used to specify the function that will return the content to be inserted.
    • index: It is used to return the index position of the element.
    • html: It is used to return the current HTML of the selected element.

Example 1: This example append the content at the end of paragraph and list.




<!DOCTYPE html>
<html>
      
<head>
    <title>
        jQuery append() Method
    </title>
      
    <script src="
    </script>
      
    <!-- Script to append content -->
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("p").append(" <b>Append Geeks</b>.");
            });
            
            $("#btn2").click(function(){
                $("ol").append("<li>Append Gfg</li>");
            });
        });
    </script>
</head>
  
<body>
    <h1 style="margin-left: 150px;">Geeks</h1>
      
    <p>GeeksforGeeks</p>
    <p>Jquery</p>
   
    <ol>
        <li>Gfg 1</li>
        <li>Gfg 2</li>
        <li>Gfg 3</li>
    </ol>
   
    <button id="btn1">Append Geeks</button>
    <button id="btn2">Append Gfg</button>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example append the content at the end of paragraph.




<!DOCTYPE html>
<html>
      
<head>
    <title>
        jQuery append() Method
    </title>
      
    <script src="
    </script>
      
    <!-- Script to append content -->
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("p").append(function(n) {
                    return "<b>   Index of Element is "
                            + n + ".</b>";
                });
            });
        });
    </script>
</head>
  
<body>
    <h1 style="margin-left:150px;">Geeks</h1>
      
    <p>Geeks for Geeks</p>
    <p>Jquery_append</p>
   
    <button>
        Insertion using Append Method()
    </button>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :