Thêm thành phần với .append()

Nếu việc thêm một thành phần gây mất thời gian cho bạn khi phải lấy giá trị và cộng chuỗi, thì jQuery cung cấp một function đơn giản hơn .append().

.append()

  • Thành phần được thêm thành phần mới bằng function .append(), nội dung này thường được sắp xếp ở vị trí sau cùng.
  • Tham khảo thêm .append()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</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>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
div, p {
    border: 2px solid #c00;
    padding: 10px;
}
p { border-color: #00c;}
</style>
</head>
<body>
<div>Thành phần div</div>
</body>
</html>

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

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>

Download file để thực hành

:append() cho từng item

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('li').append('<p>Nội dung thêm vào</p>');
});
</script>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
ul { list-style: none; }
li {
    border: 2px solid #c00;
    padding: 10px;
}
p {
    border: 2px solid #00c;
    padding: 10px;
}
</style>
</head>
<body>
<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
<li>Thành phần li</li>
</ul>
</body>
</html>

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

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

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

<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
<li>Thành phần li</li>
</ul>

<ul>
<li>Thành phần li
<p>Nội dung thêm vào</p>
</li>
<li>Thành phần li
<p>Nội dung thêm vào</p>
</li>
<li>Thành phần li
<p>Nội dung thêm vào</p>
</li>
</ul>

:append() kết hợp với function .click()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var paragrapth = $('<p>Nội dung thêm vào</p>');
    
    $('button').click(function(){
        $('li').append(paragrapth);
    });
});
</script>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
ul { list-style: none; }
li {
    border: 2px solid #c00;
    padding: 10px;
}
p {
    border: 2px solid #00c;
    padding: 10px;
}
button {
    margin-bottom: 5px;
    padding: 0 5px;
}
</style>
</head>
<body>
<button>Click</button>
<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
<li>Thành phần li</li>
</ul>
</body>
</html>

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

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

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

<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
<li>Thành phần li</li>
</ul>

<ul>
<li>Thành phần li
<p>Nội dung thêm vào</p>
</li>
<li>Thành phần li
<p>Nội dung thêm vào</p>
</li>
<li>Thành phần li
<p>Nội dung thêm vào</p>
</li>
</ul>

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *