Phương thức html
Phương thức html cho phép thay đổi văn bản
phần tử và lấy nó cùng với các thẻ.
Cú pháp
Lấy văn bản:
$(selector).html();
Thay đổi văn bản:
$(selector).html(văn bản mới);
Thêm thông tin
Phương thức html có thể áp dụng một hàm đã cho
cho mỗi phần tử trong bộ chọn.
Khi đó, tham số đầu tiên của hàm sẽ nhận được
số thứ tự của phần tử trong bộ chọn, và tham số thứ hai
- văn bản hiện tại của phần tử:
$(selector).html(function(số thứ tự trong bộ chọn, văn bản hiện tại của phần tử));
Tên biến trong hàm có thể là bất kỳ.
Ví dụ, nếu cho tham số đầu tiên chúng ta đặt tên
index - khi đó bên trong hàm của chúng ta sẽ có sẵn
biến index, trong đó sẽ chứa số thứ tự trong
bộ chọn cho phần tử mà hàm đang xử lý
tại thời điểm hiện tại. Tương tự, nếu cho tham số thứ hai
đặt, ví dụ, tên value - khi đó
bên trong hàm của chúng ta sẽ có sẵn biến value,
trong đó sẽ chứa văn bản của phần tử mà hàm
đang xử lý tại thời điểm hiện tại:
$(selector).html(function(index, value) {
// ở đây có thể truy cập các biến index và value
});
Văn bản của mỗi phần tử sẽ được thay đổi thành văn bản mà hàm trả về cụ thể cho phần tử đó.
Ví dụ
Hãy hiển thị nội dung của đoạn văn chúng ta:
<p id="test">văn bản</p>
let text = $('#test').html();
alert(text);
Ví dụ
Hãy thay đổi nội dung của đoạn văn chúng ta:
<p id="test">văn bản1</p>
$('#test').html('văn bản2');
Mã HTML sẽ trông như thế này:
<p id="test">văn bản2</p>
Ví dụ
Hãy thay đổi nội dung của đoạn văn chúng ta thành văn bản có chứa thẻ:
<p id="test">văn bản1</p>
$('#test').html('<span>văn bản2</span>');
Mã HTML sẽ trông như thế này:
<p id="test"><span>văn bản2</span></p>
Ví dụ
Hãy thêm vào cuối mỗi đoạn văn số thứ tự của nó trong bộ chọn:
<p>văn bản</p>
<p>văn bản</p>
<p>văn bản</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
Mã HTML sẽ trông như thế này:
<p>văn bản 0</p>
<p>văn bản 1</p>
<p>văn bản 2</p>
