The jQuery after() and jQuery insertAfter() both methods are used to perform the same task of inserting additional contents after the selected elements.
The main difference between after() and insertAfter is in syntax and placement of the content and target.
In after() method, target is the selected element and content is placed as an argument of the method.
$(target).after(contentToBeInserted)
In insertAfter() method, content is the selected element and target is placed as an argument of the method.
$(contentToBeInserted).insertAfter(target)
Syntax:
$(content).insertAfter(selector)
| Parameter | Description |
|---|---|
| Content | It is a mandatory parameter. It specifies the content which you want to insert. |
| Selector | It is also a mandatory parameter. It specifies the place where you insert the content.> |
Let's see an example of jQuery insertAfter() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<span><b>Hello rookienerd.com</b></span>").insertAfter("p");
});
});
</script>
</head>
<body>
<button>Insert span element after each p element</button>
<p>This is a tutorial website.</p>
<p>This is a training institute.</p>
</body>
</html>Output:
This is a tutorial website.
This is a training institute.
