Trong jQuery, việc thêm mới hoặc loại bỏ các phần tử HTML là một trong những thao tác thiết yếu để thao tác giao diện động (DOM). Bài viết này sẽ giúp bạn nắm vững cách sử dụng các hàm như .append(), .prepend(), .after(), .before(), .remove(), .empty()… thông qua các ví dụ đơn giản và dễ hiểu.

1. Thêm (Add) phần tử HTML

.append()

Thêm nội dung vào cuối bên trong phần tử được chọn.

js
$("#list").append("<li>Mục mới cuối danh sách</li>");

.prepend()

Thêm nội dung vào đầu bên trong phần tử được chọn.

js
$("#list").prepend("<li>Mục mới đầu danh sách</li>");

.after()

Thêm nội dung ngay sau phần tử được chọn (cùng cấp).

js
$("#list").after("<p>Đây là đoạn sau danh sách</p>");

.before()

Thêm nội dung ngay trước phần tử được chọn.

js
$("#list").before("<h3>Tiêu đề danh sách</h3>");

2. Tạo phần tử mới và gắn vào DOM

Bạn có thể tạo phần tử mới bằng jQuery rồi thêm vào vị trí mong muốn:

js
let newItem = $("<li></li>").text("Mục được tạo mới");
$("#list").append(newItem);

Hoặc thêm nhiều phần tử cùng lúc:

js
$("#list").append("<li>Mục A</li><li>Mục B</li>");

3. Xóa (Remove) phần tử

.remove()

Loại bỏ phần tử khỏi DOM hoàn toàn.

js
$("#myDiv").remove();

Bạn cũng có thể truyền selector để chỉ xóa phần tử con cụ thể:

js
$("ul li").remove(".to-delete");

.empty()

Xóa toàn bộ nội dung con bên trong phần tử, nhưng không xóa phần tử đó.

js
$("#myDiv").empty();

4. Thay thế (Replace) phần tử

.replaceWith()

Thay thế phần tử bằng nội dung mới.

js
$("#oldItem").replaceWith("<div>Phần tử mới thay thế</div>");

5. Ví dụ

html
Thử online
<div id="content">
    <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</div>
  
<div style="margin-top: 20px;">
  <button id="btnAppend">Thêm vào cuối danh sách</button>
  <button id="btnPrepend">Thêm vào đầu danh sách</button>
  <button id="btnAfter">Thêm đoạn văn sau danh sách</button>
  <button id="btnRemove">Xóa 'Item 2'</button>
  <button id="btnEmpty">Làm rỗng danh sách #list</button>
  <button id="btnEmptyContent">Làm rỗng toàn bộ #content</button>
</div>

<script>
$("#btnAppend").click(function () {
    $("#list").append("<li>Item mới (cuối)</li>");
  });

  // Thêm vào đầu danh sách
  $("#btnPrepend").click(function () {
    $("#list").prepend("<li>Item mới (đầu)</li>");
  });

  // Thêm sau danh sách
  $("#btnAfter").click(function () {
    $("#list").after("<p>Đoạn văn sau danh sách</p>");
  });

  // Xóa 'Item 2'
  $("#btnRemove").click(function () {
    $("li:contains('Item 2')").remove();
  });

  // Làm rỗng toàn bộ nội dung #list
  $("#btnEmpty").click(function () {
    $("#list").empty();
  });
  
    // Làm rỗng toàn bộ nội dung #content
  $("#btnEmptyContent").click(function () {
    $("#content").empty();
  });
</script>

🔁 Tổng hợp các hàm jQuery Add/Remove Elements

Hàm jQueryMô tả
.append()Thêm vào cuối phần tử cha
.prepend()Thêm vào đầu phần tử cha
.after()Thêm sau phần tử
.before()Thêm trước phần tử
.remove()Xóa phần tử khỏi DOM
.empty()Xóa toàn bộ nội dung bên trong
.replaceWith()Thay thế phần tử bằng phần tử khác

🎯 Kết luận

Việc thêm, xóa hoặc thay thế phần tử HTML bằng jQuery giúp bạn dễ dàng điều khiển giao diện web động mà không cần reload trang. Hãy luyện tập thường xuyên để thành thạo các hàm .append(), .remove(), .empty() và đồng thời áp dụng vào các tình huống thực tế như tạo bảng dữ liệu, quản lý form, hoặc tùy biến giao diện.