jQuery: html() method
Phương thức html() cũng tương tự như phương thức text(), nhưng phương thức html() ngoài việc lấy hoặc thiết đặt nội dung phần tử HTML còn có thể lấy và thiết đặt cả những phần tử HTML kèm vào phần nội dung.
Cú pháp:
$(Bộ_chọn).html(); //Cú pháp này sẽ lấy nội dung
$(Bộ_chọn).html( “Nội_dung”); //Cú pháp này sẽ thiết đặt nội dung.
Ví dụ dưới đây sẽ cho bạn thấy phương thức html() ngoài việc lấy được nội dung thông thường nằm trong phần tử HTML được chỉ định còn có thể lấy cũng như thiết đặt được những phần tử <em> và <strong> nằm trong đó.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis. com/ajax/libs/jquery/1.11.0 /jquery.min.js">
</script>
<script>
$(function(){
$("#btn1").click(function(){
alert("Lấy nội dung ban đầu: "+$("#html").html());
});
$("#btn2").click(function(){
$("#html").html("<strong> v1study</strong>.com");
alert("Sau khi đặt lại nội dung: "+$("#html").html());
});
});
</script>
</head>
<body>
<p id="html"><em>v1study</em>.com</p>
<button id="btn1">Lấy nội dung ban đầu</button>
<button id="btn2">Đặt lại nội dung</button>
</body>
</html>
Hàm callback cho phương thức html()
Cú pháp:
$(Bộ_chọn).html(function( i,Nội_dung_cũ){
return Nội_dung_mới;
});
, trong đó i là chỉ số của phần tử hiện thời.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis. com/ajax/libs/jquery/1.11.0 /jquery.min.js">
</script>
<script>
$(function(){
$("#btn").click(function(){
$("#test").html(function( i,noidungcu){
alert(noidungcu);
return "HTML: Nội dung <b>mới</b> (index: " + i + ").";
});
});
});
</script>
</head>
<body>
<p id="test">HTML: Nội dung <b>ban đầu</b>.</p>
<button id="btn">HTML: Click lấy nội dung mới</button><br>
</body>
</html>