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ó.