Phần tử DOM HTML appendChild ()
Các ví dụ
Nối một mục vào danh sách:
const node = document.createElement("LI");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
- Coffee
- Tea
- Coffee
- Tea
- Water
Di chuyển một mục từ danh sách này sang danh sách khác:
const node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
- Coffee
- Tea
- Water
- Milk
- Coffee
- Tea
- Milk
- Water
Thêm ví dụ bên dưới.
Định nghĩa và Cách sử dụng
Phương appendChild()
thức thêm một nút như là nút con cuối cùng của một nút.
Mẹo: Nếu bạn muốn tạo một đoạn mới với văn bản, hãy nhớ tạo văn bản dưới dạng nút Văn bản mà bạn nối vào đoạn, sau đó nối đoạn vào tài liệu.
Bạn cũng có thể sử dụng phương pháp này để di chuyển một phần tử từ phần tử này sang phần tử khác (Xem "Ví dụ khác").
Xem thêm:
Cú pháp
node.appendChild(node)
Thông số
Parameter | Description |
node | Required. The node to append. |
Giá trị trả lại
Loại | Sự miêu tả |
Nút | Nút nối |
Các ví dụ khác
Tạo phần tử <p> và nối phần tử đó 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);
Tạo phần tử <p> và nối phần tử đó vào phần nội dung 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);
Các phương pháp phần tử liên quan:
Phương thức Element removeChild ()
Phương thức Element ReplaceChild ()
Phương thức phần tử hasChildNodes ()
Phương pháp tài liệu liên quan:
Phương thức Document createElement ()
Phương thức Document createTextNode ()
Hỗ trợ trình duyệt
element.appendChild()
là một tính năng DOM Level 1 (1998).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |