Với Jquery bạn có thể thêm phần tử vào HTML chỉ với một nhấp chuột. Chính điều này đã khiến cho nó trở thành ngôn ngữ được ưa chuộng. Dưới đây là các hàm được sử dụng để chèn nội dung vào trong HTML.
Danh sách các hàm bao gồm:
- append()
- prepend()
- after()
- before()
- empty()
- remove()
1. Hàm append()
Được dùng để chèn thêm nội dung vào phía sau của phần tử được chọn.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ví dụ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p>Chào bạn đây là website </p>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('p').append('<b>Quachquynh.com</b>');
});
</script>
</body>
</html>Kết quả:
Ví dụ trên chỉ cần load lại trang là jQuery sẽ thêm phần tử vào. Bạn cũng có thể dùng lắng nghe sự kiện như Click chuột
<p>Đoạn văn bản </p>
<button id="btn2">Ấn nút</button>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#btn2").click(function(){
jQuery('p').append('<b>Quachquynh.com</b>');
});
});
</script>
2. Hàm prepend()
Ngược lại với hàm append, prepend() sẽ thêm nội dung vào HTML ở phía trước.
Cũng với ví dụ trên giờ sẽ thay bằng
jQuery('p').prepend('<b>Quachquynh.com</b>');
3. Hàm after()
Hàm after sẽ thêm nội dung vào bên dưới phần tử HTML được chọn.
jQuery('p').after('<b>Quachquynh.com</b><br>');
4. Hàm before()
Before có nghĩa là nội dung sẽ được chèn vào phía bên trên của phần tử HTML.
jQuery('p').before('<b>Quachquynh.com</b> ');
5. Hàm empty()
Sẽ làm cho nội dung cần tác động bị rỗng, không nhìn thấy.
Ví dụ:
jQuery('p').empty();6. Hàm remove()
Hàm remove sẽ xóa thành phần được chọn đi.
jQuery('p').remove();Qua bài viết này bạn đã hiểu rõ được các hàm sử dụng để chèn nội dung vào HTML với Jquery rồi phải không. Sau khi nắm vững bạn sẽ sử dụng một cách thuần thục để áp dụng cho các dự án của mình.
