jQuery insertAfter() Method

Quiz

The insertAfter() method in jQuery is used to insert HTML elements after the specified target element(s) in the DOM. This method accepts a parameter named "selector", which specifies the target element(s) after which the content will be inserted.

If we want to insert HTML elements before the selected target elements, we need to use the insertBefore() method.

Syntax

Following is the syntax of insertAfter() method in jQuery −

$(content).insertAfter(selector)

Parameters

This method accepts the following parameter −

content: The HTML content or elements to be inserted after the target element(s).
selector: The element(s) after which the content will be inserted.

Note: If the content provided is already an existing element, it will be moved from its current position in the DOM and then inserted after the chosen target element(s).

Example 1

In the following example, we are using the insertAfter() method to insert a <p> element after the <div> element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("<p>This is a newly inserted paragraph.</p>").insertAfter("div");
  })
});
</script>
</head>
<body>
<div style="border: 2px solid green; width: 10%;" >DIV element.</div>
<button>Click here!</button>
</body>
</html>

After executing and clicking the button, the <p> element will be inserted after the <div> element.

Example 2

Here, we are inserting an existing element after each selected element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").insertAfter("h2");
  })
});
</script>
</head>
<body>
<p>This is a paragraph element.</p>
<h2>Heading element.</h2>
<h2>Heading element.</h2>
<button>Click here!</button>
</body>
</html>

As the provided content is already an existing element, it will be moved from its current position in the DOM and then inserted after the <h2> target element.

jquery_ref_html.htm

Print Page