Phương thức appendChild() trong JavaScript

• Bùi Tấn Lực
• 1027
• 15/09/2025

Chức năng của Phương thức appendChild() trong JavaScript

Phương thức appendChild() trong JavaScript dùng để thêm một node (nút) phần tử HTML vào một thẻ HTML khác, nút được thêm vào là cuối thẻ, ngoài ra còn có thể di chuyển phần tử html từ thẻ này sang thẻ khác.

Cú pháp của Phương thức appendChild() trong JavaScript

tenbien.appendChild(nuthoacphantu);

tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy, phần tử HTML này dùng để thêm nút (node) hoặc di chuyển phần tử HTML khác vào cuối thẻ.

nuthoacphantu: Nút (node) hoặc phần tử HTML.

Code Phương thức appendChild() trong JavaScript

Phương thức appendChild() di chuyển trong JavaScript

Di chuyển li cuối cùng ở ul này sang li ở vị trí cuối cùng của ul kia:

const node = document.getElementById("ulhai").lastElementChild;
document.getElementById("ulmot").appendChild(node);

<ul id="ulmot">
	<li>Trang chủ</li>
    <li>Giới thiệu</li>
    <li>Blog</li>
    
</ul>
<ul id="ulhai">
    <li>Hosting</li>
    <li>Liên hệ</li>
</ul>
<p>Click vào nút DI CHUYỂN để di chuyển li cuối cùng ở ul này sang li ở vị trí cuối cùng của ul kia </p>
<button onclick="diChuyen()">DI CHUYỂN</button>
<script>
function diChuyen() {
   const node = document.getElementById("ulhai").lastElementChild;
   document.getElementById("ulmot").appendChild(node);
}
</script>

Chạy Thử

Phương thức appendChild() node li trong JavaScript

Thêm một node (nút) phần tử html li vào cuối ul:

document.getElementById("ulmot").appendChild(node);

<ul id="ulmot">
    <li>Trang chủ</li>
    <li>Giới thiệu</li>
    <li>Blog</li>
    
</ul>
<p>Click vào nút THÊM NODE để thêm một node (nút) phần tử html li vào cuối ul</p>
<button onclick="themNode()">THÊM NODE</button>
<script>
function themNode() {
   // Tạo node (nút) li
  const node = document.createElement("li");
  // Tạo nút văn bản
  const textnode = document.createTextNode("Liên hệ");
  // Thêm nút văn bản vào nút phần tử html
  node.appendChild(textnode);
  // Thêm nút phần tử HTML vào cuối ul
  document.getElementById("ulmot").appendChild(node);
}
</script>

Chạy Thử

Phương thức appendChild() node p trong JavaScript

Thêm một node (nút) phần tử html p vào cuối div:

document.getElementById("divid").appendChild(node);

<div id="divid">Thêm node p vào đây</div>
<p>Click vào nút THÊM NODE để thêm một node (nút) phần tử html p vào cuối div</p>
<button onclick="themNode()">THÊM NODE</button>
<script>
function themNode() {
   // Tạo node (nút) p
  const node = document.createElement("p");
  // Tạo nút văn bản
  const textnode = document.createTextNode("Nội dung thẻ p");
  // Thêm nút văn bản vào nút phần tử html
  node.appendChild(textnode);
  // Thêm nút phần tử HTML vào cuối div
 document.getElementById("divid").appendChild(node);
  // Thêm nút phần tử HTML vào cuối body (nếu không thêm vào div thì thử thêm vào body)
 /// document.body.appendChild(node);
}
</script>

Chạy Thử

Ứng Dụng appendChild() Trong Các Tình Huống Thực Tế

appendChild() phát huy tác dụng rõ nhất khi JavaScript cần tạo hoặc lấy một phần tử rồi đưa phần tử đó vào một vị trí cụ thể trong DOM. Thay vì viết sẵn toàn bộ nội dung trong HTML, bạn có thể để dữ liệu quyết định phần tử nào được tạo và khi nào chúng xuất hiện trên trang.

Thêm phần tử động vào danh sách bằng JavaScript

Một trường hợp phổ biến là xây dựng danh sách từ dữ liệu có sẵn. JavaScript có thể tạo từng phần tử, gán nội dung rồi dùng appendChild() để đưa chúng vào danh sách. Cách này đặc biệt hữu ích với danh sách sản phẩm, công việc, thông báo hoặc kết quả tìm kiếm được tạo trong quá trình chạy trang.

const danhSach = document.querySelector("#danh-sach");

const congViec = ["Học JavaScript", "Làm bài tập", "Kiểm tra mã"];

congViec.forEach(function (noiDung) {
    const item = document.createElement("li");
    item.textContent = noiDung;
    danhSach.appendChild(item);
});

Điểm đáng chú ý là appendChild() không tạo ra nội dung mới mà thực hiện việc đưa node đã có vào node cha. Vì vậy, quy trình thường gồm ba bước: tạo phần tử, thiết lập nội dung hoặc thuộc tính cần thiết, sau đó chèn phần tử vào DOM.

Tạo và chèn nội dung HTML theo dữ liệu người dùng

Khi nội dung thay đổi theo dữ liệu, việc tạo phần tử bằng JavaScript giúp giao diện linh hoạt hơn. Thay vì ghép một chuỗi HTML lớn, bạn có thể tạo từng phần tử bằng document.createElement(), đưa dữ liệu vào bằng textContent rồi sử dụng appendChild().

const khuVuc = document.querySelector("#thong-bao");

const thongBao = document.createElement("p");
thongBao.textContent = "Bạn có thông báo mới.";

khuVuc.appendChild(thongBao);

Cách làm này cũng giúp tách phần dữ liệu khỏi cấu trúc giao diện rõ ràng hơn. Với dữ liệu do người dùng cung cấp, ưu tiên textContent khi chỉ cần hiển thị văn bản, thay vì đưa trực tiếp chuỗi chưa được kiểm soát vào HTML.

Kết hợp appendChild() với sự kiện để xây dựng giao diện tương tác

appendChild() có thể kết hợp với các sự kiện như click để tạo phần tử ngay khi người dùng thực hiện một hành động. Đây là nền tảng của nhiều giao diện như thêm công việc, tạo thông báo, thêm dòng nhập liệu hoặc mở rộng danh sách.

const nutThem = document.querySelector("#nut-them");
const danhSach = document.querySelector("#danh-sach");

nutThem.addEventListener("click", function () {
    const item = document.createElement("li");
    item.textContent = "Phần tử mới";

    danhSach.appendChild(item);
});

Trong mô hình này, phần tử chưa cần tồn tại ngay từ đầu trong HTML. Khi sự kiện xảy ra, JavaScript mới tạo node và đưa nó vào đúng vị trí. Nhờ đó, giao diện có thể phản hồi trực tiếp theo thao tác của người dùng mà không cần tải lại trang.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức appendChild() trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức appendChild() trong JavaScript
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 *

Bình luận, Hỏi đáp