Thêm thẻ HTML bằng jQuery

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ả:

them-noi-dung-vao-html-bang-jquery

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>');

prepend

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>');

after

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> ');

before

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.

Related Posts

Cấu trúc dữ liệu và giải thuật: Một cái nhìn tổng quan

Giới thiệu Trong lĩnh vực phát triển phần mềm, cấu trúc dữ liệu và giải thuật là hai khái niệm quan trọng không thể thiếu. Cấu trúc…

Next.js – Khám phá Framework JavaScript tuyệt vời cho phát triển ứng dụng web

Giới thiệu về Next.js Next.js là một framework JavaScript mã nguồn mở và phổ biến được sử dụng để xây dựng các ứng dụng web hiệu suất…

Lisp – Cái nhìn tổng quan về ngôn ngữ lập trình đặc biệt

Lisp là gì? Lisp là một ngôn ngữ lập trình đặc biệt mang đến một cách tiếp cận độc đáo trong việc xử lý thông tin và…

Cách sử dụng đường dẫn tương đối trong HTML

Cách sử dụng đường dẫn tương đối trong HTML

Trang web hiện đại thường bao gồm nhiều tài nguyên như hình ảnh, trang HTML khác, tệp tin CSS và JavaScript. Để liên kết và truy cập…

Bài tập về hàm split trong Python

Chuỗi là một loại dữ liệu phổ biến trong lập trình, và việc xử lý chuỗi là một kỹ năng cần thiết cho các lập trình viên….

Xử lý chuỗi trong Python: Các phương thức cơ bản

Python là một trong những ngôn ngữ lập trình phổ biến nhất hiện nay. Nó được sử dụng rộng rãi trong nhiều lĩnh vực, từ phát triển…