With jQuery after you can add content after the specified selector. The content can be anything and the selector can be any element that is found on a web page. The content most often is a new HTML element or plain text. The selector should be an selector or a already initialized jQuery object that corresponds to real element on a page. Remember that jQuery.after() can only be applied to real elements so you can’t use it on virtual variables that are not yet in the page.
|
1 |
$('selector').after('content') |
So the after function makes it possible to insert elements or some other content after the selected element.
Examples
Here we have a simple examples explaining the different situations where after can be used.
Working example
Our first example will find a div element and apply the after function with another paragraph to it. Here we have a basic layout of HTML page with a div inside the body area.
|
1 2 3 4 5 |
<html> <body> <div></div> </body> </html> |
Next we will simply find the div and add a paragraph after it.
|
1 |
$('div').after('<p>Some other text</p>') |
You could also write the same function with a different approach. This would work fine as well.
|
1 2 |
var div = $('div') div.after('<p>Some other text</p>') |
Or even like this:
|
1 2 3 |
var div = $('div') var paragraph = $('<p>Some other text</p>') div.after(paragraph) |
The process goes like this in the jQuery.after() function:
- jQuery finds the element specified by the selector
- after() inserts content specified in the parameter after the previously found element
In the end with all styles, the final result would look something like this.
|
1 2 3 4 |
<body> <div></div> <p>Some other text</p> </body> |
Example with common mistake
It is common to mix up after() and append() which functions a bit differently. after() inserts after the element, as append() inserts to the last position possible inside the element.
|
1 2 3 |
<body> <div></div> </body> |
If you try to insert inside the div you need to use append().
|
1 2 |
$('div').after('<p>Some other text</p>') $('div').append('<p>Some another text</p>') |
This example will lead us to this final result:
|
1 2 3 4 5 6 |
<body> <div> <p>Some another text</p> </div> <p>Some other text</p> </body> |
From this you can observe how append and after behaves a little bit differently.
jQuery after is a good function for the right cause and you can find a lot of usage for it. You can also select multiple elements that get “after:ed” so that if you select all the divs in the page the after function will insert content after everyone of them.