Introduction to jQuery after()
The jQuery after() method is used to insert the content after the selected HTML element. This method performs the same as the jQuery append() method which inserts the specified content at the end of the selected HTML element. The reverse of the after() method is before() method, which inserts the content before the selected HTML element.
Syntax:
$(selector).after(content,function(index))This method inserts the content after the selected HTML element.
Parameters:
- content: content is used to specify the content to be inserted. The content can be HTML element, Dom element, and object.
- function(index): function( index ) is used to specify the name of the function which returns the content to be inert.
- Index: index is used to specify the index position of the element in the set.
As in the syntax of an after() method, the method is called on the selected element, and content is passed as an argument of the method.
$(selector).after(content)Where the syntax of an insertAfter() method, the method is called on content and the selected element is passed as an argument of the method.
$(content).insertAfter(selector)Examples of jQuery after()
Below are the different examples:
Example #1 – To insert the content as text
Next, we write the HTML code to understand the after() method to insert the content as text more clearly with the following example:
Code:
<!DOCTYPE html>
<html lang = "en" >
<head>
<meta charset = "utf-8" >
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery after() method </title>
<!-- code to show the jQuery after() working method -->
<script>
$( document).ready( function(){
$( "button" ).click( function(){
$( "h1" ).after( "<p> <b> This content is inserted by after method. </b> </p>");
});
});
</script>
</head>
<body>
<h1> This is first heading. </h1>
<h1> This is first heading. </h1>
<button> Click here to Insert content after each h1 element </button>
</body>
</html>Output:
Once we click the button, the output is:
In the above code, this method is to insert specified content at the end or as the last child of the selected elements in the jQuery collection.
Example #2 – Apply on div element
Next example code where the after() method call on div element and insert the empty box using the div element, as shown in below code:
Code:
<!DOCTYPE html>
<html lang = "en" >
<html>
<head>
<meta charset= "utf-8" >
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery after() method </title>
<!-- code to show the jQuery after() working method -->
<script type = "text/javascript" language = "javascript" >
$( document).ready( function() {
$( "div" ).click( function () {
$(this).after( '< div class = "d"> This box is inserted by after method </div>' );
});
});
</script>
<style>
.d{ margin: 15px; padding: 15px; border: 3px solid #666; width: 50px; }
</style>
</head>
<body>
<p> Click on any square below to insert the empty box after it : </p>
<div class = "d" style = "background-color: yellow;" > </div>
<div class = "d" style = "background-color: red;" > </div>
<div class = "d" style = "background-color: blue;" > </div>
</body>
</html>Output:
Once we click any of the boxes, the output is:
Example #3 – With insertAfter() method
Next example code where the jQuery after() and insertAfter() method used to differentiate their functionality.
Code:
<!DOCTYPE html>
<html lang = "en" >
<head>
<meta charset = "utf-8" >
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery after() method </title>
<!-- code to show the jQuery after() working method -->
<script>
$( document).ready( function(){
$( "button" ).click( function(){
$("h1").after( "<b><p> This content is inserted by after method. </b> </p>");
$( "<p><b> This content is inserted by insertAfter method. </b> </p>" ).insertAfter ( "h1" );
});
});
</script>
</head>
<body>
<h1> This is first heading. </h1>
<h1> This is first heading. </h1>
<button> Click here to Insert content after each h1 element </button>
</body>
</html>Output:
Once the Click Here button click, the output is:
Conclusion
- This method is used to insert the content after the selected HTML element.
- The after() method and the append() method performs the same task.
- The syntax of this method is $(selector).after(content, function(index )), the Parameters are content (used to specify the content to be inserted) and function(index)(used to specify the name of the function which returns the content to be inert).
- The jQuery insertAfter() can also be use alternative to jQuery after() method. The syntax of an insertAfter() is $(content ).insertAfter(selector).
Recommended Articles
This is a guide to jQuery after(). Here we discuss the basic concept, parameters and different examples with code implementation. You may also look at the following articles to learn more –
