jQuery after() Method

jQuery after() method insert content after selected elements.

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

Use the before() method to insert content before the selected elements.

Syntax

This syntax represent to the after() method

$(selector).after( content, function(index) );

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

Example

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

<!DOCTYPE html>
<html>
<head>
  <title>jQuery after() method</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").after("<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... »