.insertBefore()

Định nghĩa và sử dụng

  • .insertBefore() Chèn hoặc di chuyển một thành phần vào ngay trước mục tiêu được chọn.
  • Thường được dùng trong cấu trúc carousel có tính chất lặp lại, hoặc add more item, ...

Cấu trúc

.insertBefore(Mục tiêu)

$('<p>Thành phần p</p>').insertBefore('.test');

.insertBefore(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>').insertBefore('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:

Làm thử!

Ta thấy thành phần p đã được chèn vào ngay trước 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>

<p>Thành phần p được chèn</p>
<div class="test">Thành phần div</div>
<p>Thành phần p được chèn</p>
<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').insertBefore('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:

Làm thử!

Ban đầu thành phần h2 nằm trong thành phần div, nhưng khi sử dụng insertBefore thì thành phần h2 được di chuyển ngay vị trí phía trước 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>
<h2>Thành phần h2</h2>
<p>Thành phần p</p>
</div>

<h2>Thành phần h2</h2>
<div>
<p>Thành phần p</p>
</div>

.insertAfter()

.append()