insertBefore() và insertAfter() trong jQuery

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>

insertBefore-jquery

Đ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");

$("#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é!

Chuyên mục:

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *