Przejdź do głównej treści
  1. Strona główna
  2. Słownik
  3. INF.03
  4. appendChild() w JavaScript

appendChild() w JavaScript

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Co robi appendChild()?

appendChild() to metoda DOM w JavaScript, która dodaje wskazany element jako ostatnie dziecko innego elementu HTML. Oznacza to, że nowy element zostaje umieszczony na końcu zawartości wybranego elementu nadrzędnego.

Składnia

rodzic.appendChild(dziecko);

Przykład:

var akapit = document.createElement('p');
document.body.appendChild(akapit);

W tym kodzie:

  • document.createElement('p') tworzy nowy element <p>,
  • zmienna akapit przechowuje ten element,
  • document.body.appendChild(akapit) dodaje akapit na końcu elementu <body>.

Efekt działania

Jeżeli strona ma już jakąś zawartość, nowy akapit zostanie dodany po tej zawartości, czyli na końcu strony. Nie zostanie dodany na początku i nie usunie żadnego istniejącego elementu.

Częsty błąd

appendChild() nie oznacza „wstaw na początek”. Do wstawiania elementu przed innym elementem służy np. insertBefore().

W kontekście egzaminu

Kod:

var akapit = document.createElement('p');
document.body.appendChild(akapit);

spowoduje dodanie pustego akapitu <p></p> na końcu strony, ponieważ body jest elementem nadrzędnym, a appendChild() dopisuje element jako ostatni.