What is jQuery append() Method?

In this article, we will learn jQuery append() Method,This free JQuery tutorial for complete beginners will help you learn JQuery from scratch.

jQuery append() Method - ❤️JQuery Tutorials In 2024

Q: How to use jQuery append() Method in JQuery?

The append() method in jQuery is used to insert some content at the end of the selected elements

The 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 a required parameter and is 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 an optional parameter and is 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 appends the content at the end of the paragraph and list.

HTML

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

Output:

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

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        jQuery append() Method
    </title>
    <script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</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;">Beginner</h1>
    <p>Beginner for Beginner</p>
    <p>Jquery_append</p>
    <button>
        Insertion using Append Method()
    </button>
</body>
 
</html>

Output: