HTML DOM Element appendChild()
Przykłady
Dołącz element do listy:
const node = document.createElement("LI");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
Zanim:
- Coffee
- Tea
Później:
- Coffee
- Tea
- Water
Przenieś element z jednej listy na drugą:
const node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
Zanim:
- Coffee
- Tea
- Water
- Milk
Później:
- Coffee
- Tea
- Milk
- Water
Więcej przykładów poniżej.
Definicja i użycie
Metoda appendChild()
dołącza węzeł jako ostatnie dziecko węzła.
Porada: Jeśli chcesz utworzyć nowy akapit z tekstem, pamiętaj, aby utworzyć tekst jako węzeł Tekst, który dołączasz do akapitu, a następnie dołącz akapit do dokumentu.
Możesz również użyć tej metody, aby przenieść element z jednego elementu do drugiego (patrz "Więcej przykładów").
Składnia
node.appendChild(node)
Parametry
Parameter | Description |
node | Required. The node to append. |
Wartość zwrotu
Rodzaj | Opis |
Węzeł | Dołączony węzeł |
Więcej przykładów
Utwórz element <p> i dołącz go do elementu <div>:
const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
Utwórz element <p> i dołącz go do treści dokumentu:
const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);
Powiązane metody elementów:
Element ma metodę ChildNodes()
Powiązane metody dokumentów:
Metoda Document createElement()
Obsługa przeglądarki
element.appendChild()
to funkcja DOM Level 1 (1998).
Jest w pełni obsługiwany we wszystkich przeglądarkach:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |