Thêm thành phần với .before()
Đôi khi muốn thêm một thành phần vào trước thành phần đã có, có khi cần nhiều cách xử lý chuỗi, hay kết hợp nhều thành phần khác nhau, ở jQuery có cung cấp cho chúng ta cách tiếp cần dễ hơn với .before().
.before()
- Thêm một thành phần mới vào ngay trước thành phần có sẵn bằng function .before().
- Tham khảo thêm .before()
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(){
$('div').before('<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> |
<p>nội dung thêm vào</p> |
:before() 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(){
$('li').before('<li class="add">Nội dung thêm vào</li>');
});
</script>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
li {
border: 2px solid #c00;
padding: 10px;
}
.add { border-color: #00c;}
</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> |
:before() 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 item = $('<li class="add">Nội dung thêm vào</li>');
$('button').click(function(){
$('li').before(item);
});
});
</script>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
li {
border: 2px solid #c00;
padding: 10px;
}
.add { border-color: #00c;}
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> |