jQuery append() Method

jQuery append() method inserts content to the end of selected elements.

jQuery append() method and appendTo() method perform the same function. There is one major difference is in the syntax, placement of the content and target element.

Use the prepend() method to insert content to the beginning of selected elements.

Syntax

This syntax represent to the append() method

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

Parameter	Type	Description
content	htmlString Element Text Array jQuery	Required. HTML string, DOM element, text node, array of elements, or jQuery object to insert at the end of selected elements.
function(index, html)	Function	Optional. A function that returns an HTML string, DOM element, text node, array of elements, or jQuery object to insert at the end of selected elements. index - Return the index position of the element in the set as an argument. html - Returns the old HTML of the selected element.

Example

Here, in this example append() method apply on selected elements when click on button.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery append() method</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("div").append("<p>New text come after end of selected element.</p>");
      });
    });
  </script>
</head>
<body>
  <div>
    <p>First paragraph start here...</p>
  </div>
  <button>Click Me</button>
</body> 
</html>

Run it... »