.append()

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

  • .append() Chèn nội dung, di chuyển thành phần vào trong thành phần khác, nội dung này thường được sắp xếp ở vị trí sau cùng.
  • Rất là nhiều ứng dụng với .append(), như tạo nội dung tooltip, sắp xếp thành phần, ...

Cấu trúc

.append(nội dung)

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

.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="https://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:

Làm thử!

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 <p>nội dung thêm vào</p> vào ngay vị trí sau cùng của 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>Thành phần div</div>

<div>Thành phần div
<p>nội dung thêm vào</p>
</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(){
  $('div').append($('h3'));
});
</script>
</head>

<body>
  <div>
    <h3>thành phần h3</h3>
    <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 h3 nằm trong thành phần div ở vị trí đầu, nhưng khi sử dụng append thì thành phần h3 được di chuyển ngay vị trí sau cùng của 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>
<h3>thành phần h3</h3>
<p>thành phần p</p>
</div>

<div>
<p>thành phần p</p>
<h3>thành phần h3</h3>
</div>

.append(function(index){...})

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(){
  $('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>

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

Làm thử!

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í sau cùng trong thành phần div tương ứng.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

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

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

.before()

.appendTo()