Skip to content
2 examples to insert HTML content by jQuery after method
In This Tutorial
The after method of jQuery
The jQuery after method allows adding the content after the specified element.
For example, you have a div or paragraph on your webpage and want to add some text content after the div or paragraph, you can use the after method of jQuery to do that.
An example of after method
You can also use the append method of jQuery to accomplish that, however, there is a difference explained at the bottom part of this tutorial with an example.
Syntax of using jQuery after
The simple syntax of using the after method is:
$(“element”).after(“Content to be added <b> can be in bold</b> with linebreaks <br> etc.”);
Example of using ‘after’ in jQuery with div element
The example below shows how to use the after method with div element to add some text. The added text will have some formatting like bold and line break as well. You can add links or other HTML tags as well.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#addtxt”).click(function(){
$(“div”).after(” some text with some <b>bold</b> and <a href=’http://www.example.com’>a link</a> and linebreak<br>”);
});
});
</script>
<style>
.divfind {
border: solid 1px;
}
</style>
</head>
<body>
<div>This is div element!
</div>
<hr />
<button id=“addtxt”>Execute after method</button>
</body>
</html>
|
Difference between ‘after’ and append methods of jQuery
The jQuery after method adds content “after” the boundary of the specified element. Whereas the append method adds the content within the boundary of the given element. The example below makes it clearer.
We have two buttons and two div elements.
As you click on the left button “Run after method”, it will add text by using “after jQuery method”.
As you click on the right button “Run append method”, it will add content by using append method of jQuery.
To make it clearer, both div elements are given borders.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#addtxt”).click(function(){
$(“.divafter”).after(” some text with some <b>bold</b> and <a href=’http://www.example.com’>a link</a> and linebreak<br>”);
});
$(“#addtxtappend”).click(function(){
$(“.divappend”).append(” some text with some <b>bold</b> and <a href=’http://www.example.com’>a link</a> and linebreak<br>”);
});
});
</script>
<style>
div {
border: solid 1px;
}
</style>
</head>
<body>
<div>This is div element that will show after example!
</div><br /><br />
<div>This is div element that will show append example!
</div>
<hr />
<button id=“addtxt”>Execute after method</button>
<button id=“addtxtappend”>Execute append method</button>
</body>
</html>
|
As you can see, the content added by using the after method added content after the border of div element while the jQuery append method added within the border of the div element.
Related reading: append | jQuery before method | jQuery click
Leave A Comment?