Web Cơ Bản

Phương thức html() trong jQuery

1) Phương thức html() trong jQuery

- Phương thức html() được dùng để:

  • Lấy nội dung bên trong phần tử được chọn.
  • Hoặc thiết lập lại nội dung bên trong phần tử được chọn.

- Lưu ý:

  • Đối với trường hợp lấy nội dung bên trong phần tử thì giá trị trả về sẽ là một chuỗi.
  • Đối với trường hợp thiết lập lại nội dung bên trong phần tử thì nội dung mới sẽ thay thế toàn bộ nội dung cũ.

2) Cách sử dụng phương thức html() trong jQuery

- Đối với phương thức html(), chúng ta có ba trường hợp sử dụng tương ứng với ba cú pháp:

2.1) Lấy nội dung bên trong phần tử

- Dưới đây là cú pháp dùng để lấy nội dung bên trong phần tử:

$(selector).html();

- Lưu ý: Nếu bộ chọn tìm được nhiều phần tử trùng khớp thì phương thức html() chỉ trả về nội dung bên trong phần tử trùng khớp được tìm thấy đầu tiên.

2.2) Thiết lập lại nội dung bên trong phần tử

- Dưới đây là cú pháp dùng để thiết lập lại nội dung bên trong phần tử:

(cú pháp này thường được sử dụng trong trường hợp bộ chọn chỉ tìm được một phần tử trùng khớp hoặc bạn muốn tất cả các phần tử trùng khớp đều được thiết lập chung một giá trị)

$(selector).html(content);

- Trong đó, tham số "content" là nội dung mà bạn muốn thiết lập lại cho phần tử.

2.3) Thiết lập lại nội dung bên trong phần tử (sử dụng hàm)

- Dưới đây là cú pháp dùng để thiết lập lại nội dung bên trong phần tử bằng cách sử dụng hàm:

(cú pháp này thường được sử dụng trong trường hợp bộ chọn tìm được nhiều phần tử trùng khớp và bạn muốn mỗi phần tử trùng khớp được thiết lập một giá trị riêng)

$(selector).html(function(index,currentcontent){
    return content;
});

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

function(index,currentcontent){
    return content;
}

- Chỉ định một hàm trả về nội dung mà bạn muốn thiết lập cho các phần tử được chọn.

- Trong đó:

  • Tham số "index" trả về chỉ số của phần tử được chọn trong danh sách các phần tử trùng khớp được tìm thấy.
  • Tham số "currentcontent" trả về nội dung hiện tại bên trong phần tử được chọn.
  • Giá trị "content" là nội dung mà bạn muốn thiết lập lại cho phần tử được chọn.

3) Một số ví dụ

Ví dụ:

- Lấy nội dung bên trong phần tử <p>


<script>
    $(document).ready(function(){
        $("button").click(function(){
            var result = $("p").html();
            alert(result);
        });
    });
</script>
Xem ví dụ
Ví dụ:

- Thiết lập lại nội dung bên trong các phần tử <p> thành Tài liệu học <b>Lập Trình Web</b>


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").html("Tài liệu học <b>Lập Trình Web</b>");
        });
    });
</script>
Xem ví dụ
Ví dụ:

- Thiết lập lại nội dung bên trong các phần tử <p> (tùy trường hợp)


<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").html(function(a,b){
                if(a==0){return "Lập Trình Web";}
                if(a==1){return b;}
                if(a==2){return b + " nâng cao";}
            });
        });
    });
</script>
Xem ví dụ

4) Điểm giống và khác giữa phương thức html() & text()

- Dưới đây là bảng mô tả điểm giống và khác giữa phương thức html() và text():

html() text()
Điểm giống - Cả hai phương thức này đều được dùng để lấy hoặc thiết lập nội dung bên trong phần tử.
Điểm khác - Phương thức html() sẽ lấy tất cả nội dung bên trong phần tử bao gồm các thẻ. - Phương thức text() chỉ lấy nội dung văn bản, nó sẽ loại bỏ tất cả các thẻ ra khỏi giá trị trả về.
- Nếu bộ chọn tìm được nhiều phần tử trùng khớp thì phương thức html() chỉ lấy nội dung bên trong phần tử trùng khớp được tìm thấy đầu tiên. - Nếu bộ chọn tìm được nhiều phần tử trùng khớp thì phương thức text() sẽ lấy nội dung văn bản của tất cả các phần tử trùng khớp đó.
- Khi thiết lập nội dung cho phần tử thì phương thức html() có thể thiết lập cả nội dung văn bản lẫn các thẻ. - Khi thiết lập nội dung cho phần tử thì phương thức text() chỉ có thể thiết lập nội dung văn bản.