Node: phương thức appendChild()

Cú pháp

appendChild(child)

Tham số

child

Nút cần thêm vào nút cha đã cho (thường là một phần tử).

Giá trị trả về

Một Node là phần tử con đã được thêm (child), trừ khi child là một DocumentFragment, trong trường hợp đó trả về DocumentFragment rỗng.

Ngoại lệ

HierarchyRequestError DOMException

Được ném ra khi các ràng buộc của cây DOM bị vi phạm, tức là nếu một trong các trường hợp sau xảy ra:

• Nếu cha của child không phải là Document, DocumentFragment hoặc Element.
• Nếu việc chèn child sẽ tạo ra một vòng lặp, tức là child là tổ tiên của nút.
• Nếu child không phải là DocumentFragment, DocumentType, Element hoặc CharacterData.
• Nếu nút hiện tại là Text và cha của nó là Document.
• Nếu nút hiện tại là DocumentType và cha của nó không phải là Document, vì doctype luôn phải là nút con trực tiếp của một document.
• Nếu cha của nút là Document và child là một DocumentFragment có nhiều hơn một nút con Element, hoặc có một nút con Text.
• Nếu việc chèn child sẽ làm cho Document có nhiều hơn một Element làm phần tử con.

Mô tả

Nếu phần tử con được truyền vào là tham chiếu đến một nút đã tồn tại trong tài liệu, appendChild() sẽ di chuyển nó từ vị trí hiện tại sang vị trí mới - không cần phải xóa nút khỏi nút cha của nó trước khi thêm vào một nút khác. Điều này có nghĩa là một nút không thể ở hai vị trí của tài liệu cùng lúc. Phương thức Node.cloneNode() có thể được dùng để tạo bản sao của nút trước khi thêm nó vào nút cha mới. Các bản sao được tạo bằng cloneNode không tự động được đồng bộ hóa.

appendChild() trả về nút vừa được thêm, thay vì trả về nút cha. Điều này có nghĩa là bạn có thể thêm nút mới ngay khi nó được tạo mà không mất tham chiếu đến nó:

const paragraph = document.body.appendChild(document.createElement("p"));
// Bạn có thể thêm các phần tử khác vào đoạn văn sau này

Mặt khác, bạn không thể dùng appendChild() theo kiểu fluent API (như jQuery).

// Cách này không thêm ba đoạn văn:
// ba phần tử sẽ bị lồng nhau thay vì là các phần tử anh em
document.body
  .appendChild(document.createElement("p"))
  .appendChild(document.createElement("p"))
  .appendChild(document.createElement("p"));

Ví dụ

Thêm một đoạn văn vào body

// Tạo một phần tử đoạn văn mới và thêm nó vào cuối phần body của tài liệu
const p = document.createElement("p");
document.body.appendChild(p);

Tạo một cấu trúc DOM lồng nhau

Trong ví dụ này, chúng ta cố gắng tạo một cấu trúc DOM lồng nhau bằng ít biến tạm nhất có thể.

const fragment = document.createDocumentFragment();
const li = fragment
  .appendChild(document.createElement("section"))
  .appendChild(document.createElement("ul"))
  .appendChild(document.createElement("li"));
li.textContent = "hello world";

document.body.appendChild(fragment);

Nó tạo ra cây DOM sau:

<section>
  <ul>
    <li>hello world</li>
  </ul>
</section>

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Node.removeChild()
• Node.replaceChild()
• Node.insertBefore()
• Node.hasChildNodes()
• Element.insertAdjacentElement()
• Element.append()