Love beautiful code? We do too.

  1. Home
  2. Tutorial
  3. Hàm jQuery
  4. .append() trong jQuery
Previous Lesson Next Lesson

.append() trong jQuery

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

.append(): Thành phần được chèn thêm nội dung, nội dung này thường được sắp xếp ở vị trí sau cùng.

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

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

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

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

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

.append(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').append('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<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 append thì thành phần div được chèn thêm thành phần

nội dung thêm vào

vào ngay vị trí sau cùng của thành phần div.

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

Kết quả:

Previous Lesson Next Lesson

Viết câu trả lời

Drop Images

0 Bình luận

Danh mục bài học

Hoclaptrinh.vn © 2017

From Coder With