Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Bài 06: jQuery Attributes - html()
Hàm html() jquery dùng để lấy nội dung HTML bên trong một thẻ nào đó. Nếu selector bạn truyền vào trả về là một danh sách thì nó sẽ lấy nội dung HTML của phần tử đầu tiên.
1. Cú pháp hàm html() jquery
Hàm html() jquery có hai cách dùng như sau:
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
- Dùng lấy nội dung (get):
$('selector').html() - Dùng thiết lập nội dung (set):
$('selector').html('noi dung ben trong')
2. Cách sử dụng hàm html() jquery
Sử dụng html() lấy nội dung (get):
Ví dụ: Lấy nội dung của thẻ div#content và alert() lên màn hình.
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#button').click(function(){
var content = $('#content').html();
alert(content);
});
});
</script>
</head>
<body>
<div id="content">
<h1>Nội dung nè</h1>
</div>
<input type="button" value="Lấy nội dung bên trong" id="button"/>
</body>
</html>Sử dụng html() để thiết lập nội dung (set):
Vi dụ: Khai báo một biến chứa một đoạn mã html và gán vào thẻ div#content
Bài viết này được đăng tại [free tuts .net]
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#button').click(function(){
var content = '<h1>Nội dung nè</h1>';
$('#content').html(content);
});
});
</script>
</head>
<body>
<div id="content">
</div>
<input type="button" value="Thiết lập nội dung" id="button"/>
</body>
</html>3. Ví dụ tổng hơp hàm html() jquery
Cho hai thẻ div#content1 và div#content2. Xây dựng chương trình hoán đổi nội dung bên trong hai thẻ div này.
<!DOCTYPE html>
<html>
<head>
<title>Đổi màu nhé</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<style>
#content1{
height: 200px; background:red
}
#content2{
height: 200px; background:yellow
}
</style>
<script language="javascript">
$(document).ready(function()
{
$('#button').click(function(){
// Lấy nội dung
var content1 = $('#content1').html();
var content2 = $('#content2').html();
// Thực hiện đổi nội dung
$('#content1').html(content2);
$('#content2').html(content1);
});
});
</script>
</head>
<body>
<div id="content1">
<h1>Chào mừng các bạn</h1>
</div>
<div id="content2">
<h1>Đến với <a href="https://freetuts.net">freetuts.net</a></h1>
</div>
<input type="button" value="Hoán đổi nội dung" id="button"/>
</body>
</html>4. Lời kết
Bài này thật sự căn bản nhưng mình rất thích mấy cái ví dụ, nó rất thực tế và dễ hiểu cho những bạn mới học jquery. Hy vọng qua bài này bạn nắm được cách sử dụng hàm html() trong jquery và kết hợp vỡi những hàm khác để xử lý giao diện nhé.
