Quick Reach
The HTML and jQuery
In order to place or set HTML content by using jQuery to the specified elements in a web page, the jQuery comes up with $.html method.
See an example to add HTML
This method is used to retrieve or get the content of the first matched element or replace or set the content of all the matched elements. The content may be HTML formatted.
For example, setting the content as bold, changing heading tags of HTML etc..
A get HTML example
In this chapter, we will cover both aspects, getting and setting the content of elements by using $.html method with examples.
Get content by jQuery HTML method
You can use $.html method of jQuery to get the content of specified elements. The method will return only first matched element’s content if there are multiple occurrences.
For example, if you have two or three paragraphs with text information, calling $.html method will return only first paragraph’s content.
Syntax to get content:
$(“element”).html()
Note that, this will return HTML code, not the formatted text. The example below makes it clearer.
Getting jQuery inner html example
The example below shows how to use the HTML method to get specified element content. In this example, two paragraphs with same IDs are used with different content. As you click on the button “jQuery HTML”, it will display an alert showing first paragraph content.
As mentioned earlier, only the first paragraph’s content will be shown if there are multiple matches.
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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#htmlcontent”).click(function(){
alert($(“#content”).html());
});
});
</script>
</head>
<body>
<button id=“htmlcontent”>jQuery HTML</button>
<p id=“content”>Paragraph 1 with a <a href=“http://www.example.com/”>link</a></p>
<p id=“content”>Paragraph 2</p>
</body>
</html>
|
As you can see, the alert shows HTML code which is the link’s tag.
Set or add content with HTML method of jQuery
You can use $.html method to set or add HTML content to the specified elements. Unlike using the HTML method to get content, setting HTML will affect all matched elements.
Note that, the content will be replaced for all matched elements.
Syntax to set content
$(“element”).html(“HTML_Content”);
For example, if you have two paragraphs and you set the content by $.html method, it will replace the given content with existing content. The example shows how.
jQuery add HTML example
The example below shows how to set content to the given elements. Two paragraphs have different content. As the button “jQuery HTML” is clicked, the HTML jQuery method will replace existing content with the given content.
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
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#htmlcontent”).click(function(){
$(“p”).html(“HTML method example”);
});
});
</script>
</head>
<body>
<button id=“htmlcontent”>jQuery HTML</button>
<p id=“content”>Paragraph 1 with a <a href=“http://www.example.com/”>link</a></p>
<p id=“content”>Paragraph 2</p>
</body>
</html>
|
As you can see, both paragraphs text is replaced. You can change only single paragraph’s content if you call it by ID, as such you should have differents IDs for different elements.
Note: the $.html method replaces the existing content, you can also use jQuery append method to add text at the end of existing content or jQuery prepend method to add content at the beginning of the existing content.
jQuery HTML example with hyperlink and heading
The example below shows how to add HTML heading (h1) and hyperlinks by using html method.
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(){
$(“#htmlcontent”).click(function(){
$(“p”).html(“<h1>JQuery HTML Example</h1>This example shows how to use HTML method <br> with a <a href=’http://www.example.com’>link</a> example!”);
});
});
</script>
</head>
<body>
<button id=“htmlcontent”>HTML</button>
<p id=“content1”>Click above button to see heading and link example!</p>
</body>
</html>
|
Read also: jQuery prepend | jQuery append
Leave A Comment?