Metody createElement() i appendChild() w JavaScript

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

Metody document.createElement() oraz appendChild() służą do dynamicznego tworzenia i dodawania elementów HTML za pomocą JavaScript. Działają na strukturze DOM, czyli obiektowym modelu dokumentu strony internetowej.

document.createElement()

Metoda document.createElement("nazwa") tworzy nowy element HTML, ale jeszcze nie wyświetla go na stronie. Element istnieje w pamięci jako obiekt DOM.

Przykład:

var akapit = document.createElement("p");

Ten kod tworzy nowy element <p>, czyli akapit. Samo utworzenie elementu nie oznacza jeszcze, że pojawi się on w dokumencie.

appendChild()

Metoda appendChild() dodaje wskazany element jako ostatnie dziecko danego elementu nadrzędnego.

Przykład:

document.body.appendChild(akapit);

Ten kod dodaje wcześniej utworzony akapit na końcu elementu <body>, czyli na końcu widocznej treści strony.

Pełny przykład

var akapit = document.createElement("p");
akapit.textContent = "Nowy akapit";
document.body.appendChild(akapit);

Efekt: na końcu strony zostanie dodany akapit z tekstem „Nowy akapit”.

Ważne na egzaminie

  • createElement() tylko tworzy element.
  • appendChild() wstawia element do dokumentu.
  • document.body.appendChild(element) dodaje element na końcu strony.
  • Kod nie usuwa elementów i nie wyświetla okna dialogowego.