Thêm thành phần với .appendTo()
Để thêm hoặc di chuyển một thành phần mới tới thành phần đã tồn tại, chúng ta có thể làm nhiều cách khác nhau, một trong cách hữu dụng mà đơn giản là dùng .appendTo().
.appendTo()
- Thêm một thành phần mới vào thành phần có sẵn bằng function .appendTo(), nội dung này thường được sắp xếp ở vị trí sau cùng.
- Tham khảo thêm .appendTo()
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('<p>Nội dung thêm vào</p>').appendTo('div');
});
</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 |
:appendTo() cho từng item
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('<p>Nội dung thêm vào</p>').appendTo('li');
});
</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> |
<ul> |
:appendTo() 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="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var paragrapth = $('<p>Nội dung thêm vào</p>');
$('button').click(function(){
paragrapth.appendTo('li');
});
});
</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> |
<ul> |