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:

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

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.

snippet
<!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>
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +