.insertAfter() method in Jquery

Description:

The jQuery insertAfter() methods is used to add the contents after the selected elements.

Syntax

$(selector).insertAfter(target)

Difference between jQuery after() and insertAfter()

The main difference between after() and insertAfter() method is their syntax and their placement of the target and content location.

after(): $(selector).after(content)
insertAFter : $(content).insertAfter(selector)

Example:

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block; 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('#btnClick').click(function () {
 $('<div style="color:#ff0000"> This is Newly added text </div>').insertAfter("#divcontainer");
 })
 });
 </script>
</head>
<body>
 <button id="btnClick">Click to Add content using insertAfter()</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

<head>

<style>

.container {

border: 5px solid #1a80b6;

padding: 10px;

display: inline-block;

}

</style>

$(document).ready(function () {

$('#btnClick').click(function () {

$('<div style="color:#ff0000"> This is Newly added text </div>').insertAfter("#divcontainer");

})

});

</script>

</head>

<body>

<button id="btnClick">Click to Add content using insertAfter()</button><br /><br />

<div>

This is Default text

</div>

</body>

</html>

Output:

By clicking the button, “this is Newly added text” will append after the selected div (divcontainer).

.insertAfter() method in Jquery