jQuery insertAfter() Method

jQuery insertAfter() method inserts HTML elements after the selected elements.

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

Use the insertBefore() method to insert HTML elements before the selected elements.

Syntax

Here is a syntax for insertAfter() method

$(content).insertAfter(selector);

Parameter	Type	Description
content	String	Required Specifies the HTML content to insert.
selector	Selector	Required Specifies the selector expression, where to insert the content.

Example

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

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

Run it... »