jQuery append()

The jQuery append() method is used to insert specified content as the last child (at the end of) the selected elements in the jQuery collection.

The append () and appendTo () methods are used to perform the same task. The only difference between them is in the syntax.

Syntax:

Parameters of jQuery append() method

Parameter	Description
Content	It is a mandatory parameter. It specifies the content which you want to insert. Its possible values are: HTML elements jQuery objects DOM elements
Function (index,html)	It is an optional parameter. It specifies the function that returns the content to insert. Index: It returns the index position of the element in the set. HTML: It returns the current HTML of the selected element.

Example of jQuery append() method

Let's take an example to demonstrate the jQuery append() method.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(" <b>Newly added appended text</b>.");
    });
    $("#btn2").click(function(){
        $("ol").append("<li><b>Newly added appended item</b></li>");
    });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
  <li>Item no.1</li>
  <li>Item no.2</li>
  <li>Item no.3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append item</button>
</body>
</html>

Test it Now

Next TopicjQuery appendto()

← prev next →