jQuery | append() Method

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.
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="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 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="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;">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:
jQuery-HTML/CSS
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to add options to a select element using jQuery?
How to Dynamically Add/Remove Table Rows using jQuery ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?