jQuery | append() Method

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.