Skip to content
3 demos to add HTML content by jQuery append method
In This Tutorial
The append method
In many scenarios, you may need to add content, some plain text, HTML text or other elements to your web page without reloading.
Add content by append example
Video of this Tutorial
jQuery makes it quite easier by way of few methods that allow adding the content in the web pages. The placement of content can also be controlled easily, depending on jQuery method you are using to add content.
Add HTML example
Methods to add content
Following are methods supported in jQuery to add content:
1- $.append
The append method adds content to the end of a given element. For example:
p.append(“content”) will add content to the end of paragraphs in the document.
2- $.prepend
The prepend method, as opposed to append method, adds content at the beginning of the specified element. For example:
p.append(“content”) will add content at the beginning of paragraphs in the document.
This chapter only explains how to use append jQuery method with examples. First of all syntax of using append() method in jQuery. For learning more about prepend method: Go here
Syntax of append() method
The syntax of the jQuery append() method is:
selector.append(“content to be added”);
Where selector can be an element where you want to add content. To learn more about jQuery selectors go here.
Example of using .append method in paragraph to insert plain text
In the example below, we will show you how to add simple text at the end of a paragraph. As you click on the button “Add content”, it will add given plain text attached to the click event of the button to end of the paragraph.
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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#addcontent”).click(function(){
$(“#content”).append(” Add content! “);
});
});
</script>
</head>
<body>
<button id=“addcontent”>Add content</button>
<p id=“content”>Paragraph where content will insert! </p>
</body>
</html>
|
jQuery append HTML Example
Similarly, you can add content that contains HTML tags by using append method. For example, it can contain <b> tag, hyperlinks <a>, etc.
The example below adds bold text and a link as you click on the “Add content” button.
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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#addcontent”).click(function(){
$(“#content”).append(“<b>text in bold</b> <a href=’http://www.example.com’>a link</a> “);
});
});
</script>
</head>
<body>
<button id=“addcontent”>Add content</button>
<p id=“content”>Paragraph where content will insert! </p>
</body>
</html>
|
Example of using $.append method in body and creating new Div
In this example, new div elements are created by using jQuery append method. As you click on the “Add content” button, new div element at the body level will be created. In order to stand out each div element, style is applied by using the CSS border.
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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#addcontent”).click(function(){
$(“body”).append(“<div><b>Div is created</b><br> This is div text</div> “);
});
});
</script>
<style>
div
{
border: solid 1px #355681;
}
</style>
</head>
<body>
<button id=“addcontent”>Add content</button>
</body>
</html>
|
Also see jQuery prepend | jQuery $.after method | $.before | The click method
Leave A Comment?