BASIC TO ADVANCE

Bài 3: Hàm html() và text() trong jquery

1, Hàm html().

-Hàm này có tác dụng lấy nội dung HTML, hoặc gán nội dung HTML vào một thành phần. Hàm này có tác dụng như thuộc tính innerHTML trong javascript.

GET

-Để lấy giá trị nội dung HTML của thành phần được chọn các bạn sử dụng cú pháp sau.

Cú Pháp:

$('selector').html();

Trong đó: selector là đối tượng chúng ta cần chọn.

VD: Chúng ta có một đoạn HTML như sau:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode - learnJquery</title>
</head>
<body>
    <div>
        <p>Chào Bạn đã đến với website toidicode.com</p>
    </div>
</body>
</html>

-Giờ muốn lấy giá trị html của thẻ div kia thì chúng ta chỉ cần làm như sau:

$('div').html;
//<p>Chào Bạn đã đến với website toidicode.com</p>

Xem Kết Quả

SET

-Nếu muốn set nội dung HTML cho thành phần được chọn thì bạn chỉ việc thêm nội dung cần thêm vào trong hàm html() với cú pháp:

Cú Pháp:

$('selector').html('content');

VD: Cũng với đoạn HTML ở ví dụ trên, giờ mình sẽ thay đổi nội dung đó thành: '<b>toidicode.com</b>'

$('div').html('<b>toidicode.com</b>');

Xem Kết Quả

2, Hàm text().

-Hàm này cũng có tác dụng là lấy, thiết lập nội dung cho thành phần đươc chọn, nhưng dữ liệu này là dữ liệu text không bao gồm html (giống thuộc tính innerTEXT).

GET

-Để lấy dữ liệu cua thành phần dưới dạng text thì các bạn sử dụng cú pháp:

Cú Pháp:

$('selector').text();

VD: Chúng ta sẽ lấy nội dung text bên trong thẻ div của đoạn HTML ở VD đầu.

$('div').text();

Xem Kết Quả

SET

-Để thiết lập lại nội dung text cho thành phần, chúng ta sử dụng cú pháp.

Cú Pháp:

$('selector').text();

VD: Cũng với đoạn HTML ở VD giờ chúng ta sẽ thiết lập lại giá trị text cho nó.

$('div').text('toidicode.com');

Xem Kết Quả

3, Lời Kết.

-Như vậy mình đã giới thiệu xong đến mọi người về hàm html() và text() trong Jquery rồi. Trong thực tế, hai hàm này được sử dụng khá là nhiều, nên các bạn cần chú ý về nó.

Đăng ký nhận tin.

Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!

Vũ Thanh Tài

About author
The best way to learn is to share
Xem tất cả bài đăng

2 Comments

Có Cách nào để in 1 mảng trong javascipt ra không ạ? Em in ra nhưng toàn bị ghi đè giá trị cuối của mảng.

Em dùng $('#id').text(arr.join()); thì nó in trên cùng 1 dòng và còn dư dấu phẩy giữa các kí tự.

Cảnh Linh

3 năm trước

Em muốn in ra với mục đích gì (debug hay hiển thị), vì hàm join trong javascript mặc định nó sẽ gộp các phần tử trong mảng lại với nhau qua dấu ,

Vũ Thanh Tài

3 năm trước

Bình luận

Captcha