Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 11 Sep, 2021

In this article, we are going to see how to use 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 mandatory parameter that specifies the content that you want to insert. It can contain mainly 3 types of possible values and these are –
    • HTML values
    • jQuery objects
    • DOM values
  • 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:

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!