Cách dùng phương thức jQuery html()

jQuery có nhiều phương thức giúp developer tạo trải nghiệm web động hiệu quả. Phương thức jQuery html() thay thế toàn bộ HTML bên trong phần tử được chọn. Hữu ích nếu muốn thay đổi động nội dung người dùng thấy sau khi tương tác với trang.

Trong hướng dẫn này ta sẽ học cách dùng html() và cú pháp. Cũng xem cách tiếp cận từng bước dùng html(). jQuery html() là phương thức cơ bản trong thư viện jQuery và thường dùng. Sau khi nắm cơ bản, bạn sẵn sàng thực hành html().

jQuery html() là gì?

jQuery html() thiết lập nội dung HTML của mỗi phần tử trong tập hợp phần tử khớp. Cần thận trọng cung cấp query đủ cụ thể để chỉ thay thế HTML mong muốn.

Chỉ nội dung thay đổi với html(). Nếu có stylesheet, nội dung mới sẽ được định dạng giống nội dung trước. Cũng đáng nhớ: html() chỉ hoạt động trên tài liệu HTML – không hoạt động với XML.

Cú pháp html() jQuery

Nhớ phương thức jQuery gọi trên selector trước. Selector có thể rộng như thẻ <p> hoặc cụ thể như <div> có id (<div id='main-app'></div>). Khi phần tử mong muốn được chọn, ta gọi html() và truyền chuỗi HTML làm tham số cho html().

html() chấp nhận chuỗi literal (string literal) làm tham số hoặc biến chứa chuỗi. Truyền string literal "Nội dung mới" render giống truyền biến tham chiếu "Nội dung mới".

Giả sử có <div> đơn giản:

<div class='main-content'>
  <p class='paragraphOne'> Hello World </p>
</div>

Có thể thay thế toàn bộ thẻ <p>:

$('div.main-content').html('<p>Nội dung mới</p>')

Code trên render HTML mới như sau:

<div class='main-content'>
  <p>Nội dung mới </p>
</div>

Nếu có style gắn với <p> gốc, nó sẽ không còn hoạt động với nội dung mới. Có thể truyền chuỗi đơn giản:

$('div.main-content').html('Nội dung mới')

HTML lúc này:

<div class='main-content'> Nội dung mới </div>

Thấy sự khác biệt: truyền string literal giữ style nội dung trước. String literal đơn giản là chuỗi chứa ký tự. Nếu nội dung mới cần là phần tử con, dùng chuỗi HTML.

Đã hiểu cú pháp cơ bản, xem ví dụ.

Ví dụ jQuery html()

Ta thấy html() thay thế nội dung bên trong phần tử được chọn trong ví dụ "Nội dung mới" ở trên. Có thể thực hiện bằng cách truyền string literal hoặc chuỗi HTML làm tham số. Xem ví dụ giữ nguyên style gốc.

<head>
  <style>
    .blue { color: blue; }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
  <h2> html() Demo: </h2>
  <div class='main'>
    <p class='blue'> Hello </p>
    <p> World </p>
    <p> Goodbye </p>
  </div>
  <script></script>
</body>

Nhìn HTML trang ban đầu, chỉ từ "Hello" được style màu xanh.

Trong ví dụ này, muốn thay "Hello" bằng nội dung mới nhưng giữ style gốc. Để làm vậy, chọn đoạn văn có class blue.

$('p.blue').html("Hello AGAIN")

Đã chọn đoạn văn class blue và thay "Hello" thành "Hello AGAIN". Vì html() thay thế nội dung bọc trong tên thẻ, màu xanh sẽ giữ nguyên.

Muốn thay thế tất cả văn bản đoạn văn? Nếu chọn <p>, sẽ thay văn bản trên bằng ba instance "Hello AGAIN".

$('p').html("Hello AGAIN")

Ở đây chọn tất cả thẻ paragraph trong file HTML và thay nội dung mỗi thẻ bằng "Hello AGAIN". Giống ví dụ đầu, style gốc sẽ render vì thay nội dung bọc trong các thẻ đó.

Tăng cấp độ selector lên <div> class 'main'. Đây là lúc truyền chuỗi HTML làm tham số hữu ích.

$('div.main').html('<p class=blue>Main Div Content</p>')

Bên trong main div, có ba paragraph element. Biết html() hoạt động như thế nào, suy ra code trên sẽ thay ba thẻ <p> bằng một thẻ truyền qua tham số.

Chỉ một dòng code, ta thay thế ba paragraph element khác nhau và dùng lại class style gốc.

Kết luận

jQuery html() là phương thức thường dùng thay thế nội dung trang HTML tạo trải nghiệm động. Vì html() thay thế nội dung bọc trong HTML element, quan trọng chú ý jQuery selectors và style class. Điều này ngăn chặn thay đổi style không mong muốn.

Ta đã học jQuery html() là gì, cú pháp, và ví dụ cách dùng. Hãy dành thời gian thực hành và làm quen với phương thức phổ biến này.