jQuery thực sự rất tuyệt vời với khả năng DOM các phần tử HTML mạnh mẽ. Khi thiết kế website bạn sẽ cần dùng tới một số câu lệnh như insertBefore() và insertAfter(). Chúng sẽ giúp bạn thêm nội dung ở phía trước hoặc phía sau phần tử được chọn.
insertBefore() trong jQuery
Cú pháp:
$(noi-dung).insertBefore(selector)
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("<span>Xin chào</span>").insertBefore("h2");
});
</script>
</head>
<body>
<h2>Đây là đoạn văn bản</h2>
</body>
</html>
Đoạn mã trên cũng không có gì khó hiểu cả. Đầu tiên khởi tạo câu lệnh bằng $(document).ready(function() {} và bên trong là đoạn mã để chèn text vào phần tử được chọn là thẻ.
insertAfter() trong jQuery
insertAfter() sẽ chèn nội dung vào phía sau của một phần tử được chọn.
Sự khác nhau giữa insertBefore()/ before() và insertAfter()/ after()
Xem ví dụ:
$("<p>Xin chào</p>").insertBefore("#select");
Và
$("#select").before("<p>Xin chào</p>");
Bạn có thấy sự khác biệt nào không?
=> Sự khác biệt nằm ở đây:
- ‘ insertBefore ‘ bộ chọn được đặt ở phía sau. Nội dung thêm bắt đầu bằng thẻ và kết thúc bởi thẻ
- ‘ before ‘ bộ chọn được đặt ở phía trước. Nội dung thêm không bắt buộc phải là phần tử.
Đối với insertAfter() và after() cũng tương tự như insertBefore() và before().
Kết luận: Qua bài viết này bạn để hiểu rõ hơn bạn nên bắt tay vào thực hành chạy thử các đoạn code. Ngoài ra bạn cũng đừng bỏ lỡ những kiến thức khác trong Series học jQuery trong blog của mình nhé!
