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

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

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ẻ, chi tiết như nào hãy cùng chúng tôi phân tích:

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

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.

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:

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

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

<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ử

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

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 *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn