Phương thức HTML DOM Element appendChild()

Định nghĩa và cách sử dụng

appendChild() Phương thức thêm một nút (element) làm con cuối cùng của một element.

Xem thêm:

Phương thức insertBefore()

Phương thức replaceChild()

Phương thức removeChild()

Phương thức remove()

Thuộc tính childNodes

Thuộc tính firstChild

Thuộc tính lastChild

Thuộc tính firstElementChild

Thuộc tính lastElementChild

Phương thức tài liệu liên quan:

Phương thức createElement()

Phương thức createTextNode()

Mô hình

Ví dụ 1

Thêm mục tiêu vào danh sách:

const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

Trước khi thêm:

  • Cà phê
  • Trà

Sau khi thêm:

  • Cà phê
  • Trà
  • Nước

Thử ngay

Ví dụ 2

Chuyển đổi mục tiêu từ danh sách này sang danh sách khác:

const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);

Trước khi di chuyển:

  • Cà phê
  • Trà

  • Nước
  • Sữa

Sau khi di chuyển:

  • Cà phê
  • Trà
  • Sữa

  • Nước

Thử ngay

Ví dụ 3

Tạo đoạn văn bản có văn bản:

  • Tạo phần tử đoạn văn bản
  • Tạo nút văn bản
  • Thêm nút văn bản vào đoạn văn bản
  • Thêm đoạn văn bản vào tài liệu

Tạo một phần tử <p> và thêm vào phần tử <div>:

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

Thử ngay

Ví dụ 4

Tạo một phần tử <p> và thêm vào văn bản chính của tài liệu:

const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);

Thử ngay

Cú pháp

element.appendChild(node)

hoặc

node.appendChild(node)

Tham số

Tham số Mô tả
node Bắt buộc. Nút cần thêm vào.

Trả về giá trị

Loại Mô tả
Nút Nút đã thêm vào.

Hỗ trợ trình duyệt

element.appendChild() Là tính năng DOM Level 1 (1998).

Tất cả các trình duyệt đều hỗ trợ hoàn toàn:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ