Giới thiệu về jQuery
jQuery là một thư viện JavaScript cho phép các nhà phát triển thao tác DOM, viết xử lý sự kiện, tạo hoạt ảnh và yêu cầu AJAX chỉ với vài dòng code. Điều này được thực hiện nhờ các bộ chọn (selectors) và phương thức riêng của API jQuery. Trong số đó có phương thức append().
jQuery append() là gì?
Phương thức append() chấp nhận một hoặc nhiều đối số "nội dung" (có thể là chuỗi HTML, văn bản, mảng, phần tử DOM, hoặc đối tượng jQuery khác) và gắn nội dung đó vào cuối tất cả các phần tử khớp với bộ chọn. Các trường hợp sử dụng phổ biến bao gồm thêm mục vào cuối danh sách (như mục "cần làm" mới trong danh sách công việc) hoặc hiển thị nội dung mới khi nhấn nút. Hãy xem cách append() hoạt động qua các ví dụ code.
Cách sử dụng jQuery append()
Lấy ví dụ chèn mục vào danh sách công việc, ta sẽ thấy cách append() được gọi trên một bộ chọn và chèn nội dung vào tất cả các phần tử khớp.
HTML cơ bản cho danh sách công việc
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>Danh sách công việc</h2>
<ol class="list1">
<li>Đọc chương 1 & 2</li>
<li>Họp lúc 15:00</li>
<li>Viết về bài đọc hôm qua</li>
</ol>
</body>
</html>
Lưu ý quan trọng: cần nhúng đường dẫn đến API jQuery bên trong thẻ <script> trong <head> của trang HTML. Nếu không, ta không thể sử dụng jQuery.
Danh sách công việc sẽ hiển thị như sau:
Giả sử hôm nay ta muốn thêm kế hoạch ăn tối vào cuối danh sách.
Thêm mục mới với append()
Từ cấu trúc HTML, danh sách có thứ tự (<ol>) có class list1. Ta có thể chọn toàn bộ danh sách bằng cách thêm thẻ <script> ở cuối <body>:
<script>
$(document).ready(() => {
$(".list1").append("<li>Lên kế hoạch ăn tối</li>")
})
</script>
Trong thẻ <script>, ký hiệu $ là bộ chọn jQuery mạnh mẽ. Ta có thể chọn bất kỳ phần tử nào trong DOM bằng cách truyền tên thẻ, tên class, hoặc id. Ở đây, ta chọn phần tử có class list1, tức là toàn bộ <ol>. Bộ chọn (document) chọn toàn trang và gọi phương thức ready() để chờ trang tải xong trước khi chạy code tiếp theo, giúp code chạy theo trình tự.
Trong hàm callback của ready(), ta chọn tất cả phần tử có class list1 (tức <ol>) và chèn <li> truyền cho append() ngay trước thẻ đóng </ol>. Sau khi trang tải xong, mục "Lên kế hoạch ăn tối" sẽ được thêm vào danh sách:
Ví dụ thực tế: Hiển thị nội dung khi nhấn nút
Giả sử ta có một nút trên trang web và muốn hiển thị nội dung mới khi nút được nhấn, mà không cần tải lại trang hay chuyển hướng. Đây chính là sức mạnh của jQuery.
HTML cơ bản
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="content">
<p>Xin chào thế giới!</p>
</div>
<button id="btn-main">Nhấn vào đây!</button>
</body>
</html>
Giao diện ban đầu:
Thêm nội dung khi nhấn nút
<script>
$(document).ready(() => {
$("#btn-main").click(() => {
$("p").append("<b>Tạm biệt</b>")
})
})
</script>
Lưu ý: ID của nút là btn-main (không phải main-btn như trong code gốc). Khi tài liệu tải xong, ta gắn sự kiện click cho nút. Khi nhấn, thẻ <p> được chọn và phương thức append() chèn chuỗi HTML <b>Tạm biệt</b> vào cuối thẻ <p>. Từ "Tạm biệt" sẽ xuất hiện in đậm sau "Xin chào thế giới!".
Kết quả HTML sau khi nhấn nút:
<div class="content"> <p>Xin chào thế giới!<b>Tạm biệt</b></p> </div> <button id="btn-main">Nhấn vào đây!</button>
Giao diện hiển thị:
Nếu muốn thêm "Tạm biệt" vào cuối <div> thay vì <p>, chỉ cần thay bộ chọn $("p") thành $(".content"):
<script>
$(document).ready(() => {
$("#btn-main").click(() => {
$(".content").append("<b>Tạm biệt</b>")
})
})
</script>
Kết quả hiển thị:
Kết luận
Tóm lại, ta đã thấy phương thức append() hoạt động độc lập và trong ngữ cảnh các hàm callback. Chỉ cần nhúng bộ chọn và phương thức jQuery trong thẻ <script>, ta có thể thêm nhiều loại nội dung vào cuối bất kỳ phần tử nào khớp với bộ chọn. Phương thức append() mở ra nhiều khả năng hiển thị nội dung cho người dùng tại thời điểm cụ thể mà không cần tải lại trang hay chuyển hướng.