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:

snippet
$(selector).after(content,function(index))

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:

snippet
<!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 rookienerd.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>

Output:

This is a tutorial website.

This is a training institute.

Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +