.prepend() trong jQuery

Định nghĩa và sử dụng .prepend() trong jQuery

.prepend(): Chèn nội dung vào trong thành phần ở vị trí đầu tiên.

Cấu trúc .prepend() trong jQuery

Đã được thêm vào từ phiên bản 1.0

.prepend(nội dung)

$('div').prepend('<p>nội dung thêm vào</p>');
$('div').prepend($('h3'));

Đã được thêm vào từ phiên bản 1.4

.prepend(function(index){...})

$('div').prepend(function() {
    return <'p'> + this.className + <'/p'>;
});

.prepend(nội dung)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').prepend('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
<div>Thành phần div</div>
</body>
</html>

Hiển thị trình duyệt:

Ban đầu nội dung chỉ có thành phần div, nhưng khi sử dụng prepend thì thành phần div được chèn thêm thành phần <p>nội dung thêm vào</p> vào ngay vị trí đầu tiên của thành phần div.

.prepend(function(index){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').prepend(function() {
        return '<p>' + this.className + '</p>';
    });
});
</script>
</head>

<body>
<div class="test01">thành phần div 01</div>
<div class="test02">thành phần div 02</div>
</body>
</html>

Hiển thị trình duyệt:

Với cách sử dụng function như trên, ta đã thêm bên trong mỗi thành phần div lần lượt là thành phần p với nội dung được lấy từ tên class của thành phần div, các thành phần p này nằm ở vị trí đầu tiên trong thành phần div tương ứng.

Previous Lesson Next Lesson

Preview

Viết câu trả lời

0 Bình luận

bắt đầu chủ đề từ ·

@ ·