Định nghĩa và sử dụng
- .insertAfter(): Chèn hoặc di chuyển một thành phần vào ngay sau mục tiêu được chọn.
Cấu trúc
- Đã được thêm vào từ phiên bản 1.0
$('<p>Thành phần p</p>').insertAfter('.test');
.insertAfter(bộ chọn)
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('<p>Thành phần p được chèn</p>').insertAfter('div.test');
});
</script>
</head>
<body>
<div class="test">Thành phần div</div>
<div class="test">Thành phần div</div>
</body>
</html>
Hiển thị trình duyệt:
Ta thấy thành phần p đã được chèn vào ngay sau thành phần div có class test.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<div class="test">Thành phần div</div> |
<div class="test">Thành phần div</div> |
Ví dụ thêm
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('h2').insertAfter('div');
});
</script>
</head>
<body>
<div>
<h2>Thành phần h2</h2>
<p>Thành phần p</p>
</div>
</body>
</html>
Hiển thị trình duyệt:
Ban đầu thành phần h2 nằm trong thành phần div, nhưng khi sử dụng insertAfter thì thành phần h2 được di chuyển ngay phía sau thành phần div.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<div> |
<div> |