Manipulacja DOM w JavaScript

JavaScript nie tylko potrafi zmieniać istniejące elementy strony, ale też dodawać nowe i usuwać te, które są już w DOM.

Tworzenie nowego elementu

Aby utworzyć nowy węzeł DOM, używamy metody document.createElement("nazwaTagu"). Tworzy ona element podanego typu, który na razie istnieje tylko w pamięci (nie jest jeszcze widoczny na stronie, dopóki go nie dodamy do DOM). Po utworzeniu możemy ustawić mu potrzebne właściwości, np. dodać tekst, a następnie wstawić go do dokumentu.

Dodawanie do DOM realizujemy np. poprzez rodzic.appendChild(element), co dodaje nasz nowy element jako dziecko wskazanego elementu rodzica (na koniec listy dzieci). Można też użyć parentElement.insertBefore(newElem, referenceElem) aby wstawić w konkretne miejsce. Na razie skupmy się na appendChild, bo to najprostsze rozwiązanie.

Przykład: dodawanie elementu listy

Dodawanie nowego elementu listy <li> do istniejącej listy <ul id="lista">:

<ul id="lista">
  <li>Istniejący element</li>
</ul>

Skrypt:

let lista = document.getElementById("lista");
let nowyElement = document.createElement("li");
nowyElement.textContent = "Nowy element listy";
lista.appendChild(nowyElement);

Po wykonaniu tego kodu w strukturze HTML pojawi się dodatkowy <li> z podanym tekstem (jako ostatni element listy <ul>). Możemy dynamicznie tworzyć w ten sposób dowolne elementy: paragrafy, przyciski, nagłówki — cokolwiek potrzebujemy.

Usuwanie elementu

Jeśli chcemy pozbyć się jakiegoś węzła z DOM, możemy to zrobić na kilka sposobów. Najprostszy z nich to metoda element.remove(), która usuwa dany element z jego rodzica. Wystarczy mieć referencję do obiektu (np. uzyskaną przez getElementById) i wywołać remove(). Alternatywnie można wywołać rodzic.removeChild(child) na rodzicu, wskazując które dziecko usunąć.

Przykład: usuwanie elementu

Usuńmy pierwszy element listy (załóżmy, że ma on atrybut id="doUsuniecia"):

let doUsuniecia = document.getElementById("doUsuniecia");
doUsuniecia.remove();

Po tym wywołaniu element o danym id zniknie z DOM (zostanie usunięty wraz z ewentualnymi potomkami). Należy pamiętać, że referencja doUsuniecia nadal istnieje w naszym skrypcie, ale wskazuje już na obiekt, który nie jest w DOM.

Dynamiczne listy i interfejsy

Łącząc tworzenie elementów, ich modyfikowanie i obsługę zdarzeń, możemy budować interaktywne listy czy galerie. Przykładowo, możemy pozwolić użytkownikowi dodawać elementy do listy (np. zadań do zrobienia) poprzez wpisanie tekstu i kliknięcie przycisku "Dodaj". Każdy taki element można też wyposażyć np. w przycisk "Usuń", który po kliknięciu usunie dany element (wykorzystując remove()). Takie mechanizmy zrealizujemy w praktyce w mini-projektach.

Ćwiczenia

1. Za pomocą createElement stwórz nowy element, np. paragraf <p> z jakimś tekstem. Następnie dodaj go do istniejącego elementu na stronie, np. do document.body.appendChild(...) lub do innego kontenera. Sprawdź, czy nowy element pojawił się w strukturze DOM (np. używając konsoli deweloperskiej w zakładce Elements).
2. Dodaj do HTML pusty element kontenerowy, np. <div id="kontener"></div>. W skrypcie poprzez pętlę stwórz kilka nowych elementów (np. 5 x <span> z kolejnymi numerami) i dodaj je kolejno do tego kontenera. Efektem powinno być dynamiczne wypełnienie kontenera nowymi elementami (np. liczbami od 1 do 5).
3. Wykorzystaj element.remove() do usunięcia jakiegoś elementu na stronie. Możesz np. dodać w HTML przykładowy element z id, a następnie w JS pobrać go i usunąć. Po wykonaniu skryptu sprawdź (wizualnie lub w konsoli DOM), że element zniknął.
4. (Rozszerzenie) Spróbuj stworzyć prosty mechanizm dodawania elementów przez użytkownika: dodaj w HTML <input type="text" id="wejscie"> oraz przycisk <button id="dodajBtn">Dodaj</button>. Napisz skrypt, który po kliknięciu przycisku pobierze wartość z pola tekstowego (input.value) i utworzy nowy element (np. <li>) z tą treścią, dodając go do listy <ul> na stronie. (To zadanie łączy wiele zagadnień: operacje na DOM, zdarzenia, tworzenie elementów i odczyt wartości inputu — będzie świetną powtórką!)