Home >>jQuery Tutorial >jQuery append() Method

jQuery append() Method

jQuery append() Method

jQuery append() method in jQuery is used to inserts specified content at the end of the selected elements.

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

Parameter Values

Parameter Description
content It is a Required parameter used to insert the specifies content (can contain HTML tags)

Possible values:

  • HTML elements
  • jQuery objects
  • DOM elements
function(index,html) It is used to returns the specifies content to insert
  • index – used to Returns the set of index position in the element
  • html – used to Returns the current HTML of the selected element
Here is an example of jQuery append() Method:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$(".txt1").append(" <b>Append text</b>.");
});
$("#btn2").click(function(){
$(".list").append("<li>Append item</li>");
});
});
</script>
</head>
<body>
<p class="txt1">Phptpoint</p>
<p class="txt1">learn here</p>
<ol class="list">
<li>List item 1</li>
<li>List item 2</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list</button>
</body>
</html>

Output:

Phptpoint

learn here

  1. List item 1
  2. List item 2