jQuery after()

The jQuery after() method is used to insert specified content after the selected element. It is just like jQuery append() method.

If you want to insert content before the selected element, you should use jQuery before() method.

Syntax:

Parameters of jQuery after() method

Parameter	Description
Content	It is a mandatory parameter. It specifies the content to insert. Its possible values are: HTML elements jQuery objects DOM elements
Function (index)	It specifies a function that returns the content which is used to insert. index: It provides the index position of the element in the set.

Example of jQuery after() method

Let's see an example of jQuery after() 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(){
        $("p").after("<p><b>Hello javatpoint.com</b></p>");
    });
});
</script>
</head>
<body>
<button>Insert content after each p element</button>
<p>This is a tutorial website.</p>
<p>This is a training institute.</p>
</body>
</html>

Test it Now

Output:

This is a tutorial website.

This is a training institute.

Next TopicjQuery insertAfter()

← prev next →