Phương thức append() trong JavaScript
Bùi Tấn Lực - 1039
- 12/09/2025
Chức năng của Phương thức append() trong JavaScript
Phương thức append() trong JavaScript dùng để thêm chữ vào phía sau các phần tử con trong phần tử HTML hoặc thêm phần tử html vào phía sau các phần tử con của phần tử HTML khác.
Cú pháp của Phương thức append() trong JavaScript
tenbien.append("chu");
tenbien: Tên biến là phần tử HTML dùng để thêm chữ sau các phần tử con trong phần tử này, thường dùng document.getElementById("giá trị id") để lấy.
chu: Thêm chữ vào.
tenbien.append(phantu);
tenbien: Tên biến là phần tử HTML dùng để thêm phần tử sau các phần tử con trong phần tử này, thường dùng document.getElementById("giá trị id") để lấy.
phantu: Phần tử mới tạo.
Code Phương thức append() trong JavaScript
Phương thức append() chữ trong JavaScript
Thêm chữ vào phía sau các phần tử con trong phần tử HTML:
document.getElementById("divid").append("Xin chào!.");
<div id="divid" style="border:1px solid red;padding:20px;">Thêm chữ vào phía sau các phần tử con trong ô này!</div>
<p>Nhấn vào nút Append để thêm chữ "Xin chào!." vào phía sau các phần tử con trong ô đỏ.</p>
<button onclick="themChu()">Append</button>
<script>
function themChu() {
const divid = document.getElementById("divid");
divid.append("Xin chào!.");
}
</script>
Phương thức append() phần tử html trong JavaScript
Thêm phần tử html vào phía sau các phần tử con trong phần tử HTML khác:
document.getElementById("divid").append(h2);
<div id="divid" style="border:1px solid red;padding:20px;">Thêm phần tử HTML vào phía sau các phần tử con trong ô này!</div>
<p>Nhấn vào nút Append để thêm phần tử h2 vào sau các phần tử con trong ô đỏ</p>
<button onclick="themPhanTu()">Append</button>
<script>
function themPhanTu() {
const divid = document.getElementById("divid");
// Tạo phần tử h2
const h2 = document.createElement("h2");
// Thêm phần tử h2 vào phía sau các phần tử con trong phần tử id divid
divid.append(h2);
// Thêm chữ vào phần tử h2
h2.append("Tiêu đề h2");
}
</script>
Những Lưu Ý Khi Sử Dụng append() Trong JavaScript
Khi làm việc với DOM, append() khá linh hoạt nhưng cần hiểu rõ cách phương thức này xử lý từng loại dữ liệu. Nắm được các điểm dưới đây sẽ giúp hạn chế lỗi khi thêm nội dung động và lựa chọn cách thao tác phù hợp.
append() Có Thêm Được Nhiều Nội Dung Cùng Lúc Không?
Có. append() cho phép truyền nhiều giá trị trong cùng một lần gọi. Các giá trị có thể là chuỗi hoặc các Node đã được tạo trước đó. JavaScript sẽ xử lý lần lượt từng giá trị theo đúng thứ tự được truyền vào.
const box = document.querySelector(".box");
const title = document.createElement("h3");
title.textContent = "Nội dung mới";
box.append("Xin chào ", title, " và đây là phần tiếp theo.");
Cách này hữu ích khi một phần tử cần nhận nhiều nội dung khác nhau mà không phải gọi append() nhiều lần. Tuy nhiên, nếu giao diện phức tạp, nên tạo và tổ chức các Node riêng trước khi chèn để mã dễ đọc và dễ bảo trì hơn.
append() Khác Gì Với appendChild()?
Hai phương thức đều có thể đưa một Node vào cuối phần tử cha, nhưng append() linh hoạt hơn về loại dữ liệu nhận vào. Ngoài Node, append() còn có thể nhận chuỗi và nhiều đối số trong cùng một lần gọi.
| Tiêu chí | append() | appendChild() |
|---|---|---|
| Dữ liệu chuỗi | Có thể thêm trực tiếp | Không thêm chuỗi trực tiếp |
| Nhiều đối số | Có | Không |
| Node | Có | Có |
Vì vậy, nếu chỉ cần đưa một Node vào cuối phần tử, cả hai đều có thể đáp ứng. Khi cần kết hợp nhiều chuỗi hoặc Node trong một thao tác, append() thường thuận tiện hơn.
Khi Nào Nên Dùng append() Trong Thao Tác DOM?
Nên dùng append() khi cần bổ sung nội dung vào cuối một phần tử và muốn thao tác trực tiếp với Node hoặc chuỗi. Phương thức này đặc biệt phù hợp với các giao diện có nội dung được tạo động bằng JavaScript.
Trước khi sử dụng, nên xác định rõ phần tử đích và loại dữ liệu cần chèn. Nếu nội dung là văn bản do người dùng cung cấp, ưu tiên tạo Node và đặt nội dung bằng textContent thay vì đưa dữ liệu chưa kiểm soát vào HTML.
Đối với các thao tác DOM có cấu trúc phức tạp, nên tách từng thành phần thành các Node riêng. Cách tổ chức này giúp mã JavaScript rõ ràng hơn và giảm nguy cơ xử lý nhầm nội dung khi giao diện thay đổi.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Phương thức append() trong JavaScript.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
