Open In App

What is the use of append() method in JQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to see how to use the append() method in jQuery. The append() method is used to insert new content inside an existing element. There are some other methods also that provide to insert new content inside an existing element and these are – prepend(), html(), text(), before(), after(), wrap(), etc.

Now, let’s try to understand the append() method in detail. This method is used to insert content to the end of the selected elements.

Syntax:

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

Parameters:

  • content: It is a mandatory parameter that specifies the content that you want to insert. It can contain mainly 3 types of possible values and these are:
  • function(index, HTML): It is an optional parameter that specifies the function that takes two parameters index and HTML that returns the contents that you want to insert.
    • index: This parameter specifies the index position of the element in the set.
    • HTML: This parameter specifies the current HTML of the selected element.

Example: In this example, we will see the use of the append() method.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        What is the use of append() method in JQuery?
    </title>
    <script src="
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#btn").click(function() {
                $('div').append(' GeeksforGeeks')
            })
        });
    </script>
</head>
<body style="text-align: center;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>
        What is the use of append() method in jQuery?
    </h2>
    <div>Welcome to</div>
    <br>
    <button id="btn">Append Text</button>
</body>
</html>


Output:



Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads