Dynamiczne tworzenie i usuwanie elementów DOM

Po co się tego uczymy?

Lista produktów w koszyku nie ma z góry znanej długości — raz będzie tam jeden film, raz pięć. Statyczny HTML nie może tego przewidzieć, dlatego trzeba UMIEĆ wygenerować odpowiednią liczbę elementów dynamicznie, na podstawie danych.

Teoria

W Lekcji 6 modyfikowałeś elementy, które już istniały w HTML. Teraz nauczysz się tworzyć NOWE elementy od zera i wstawiać je do strony — to niezbędne, gdy liczba elementów zależy od danych (np. liczby produktów w koszyku), a nie jest z góry znana.

document.createElement("nazwaTagu") — tworzy nowy element (na razie "w pamięci", jeszcze niewidoczny na stronie).
element.textContent = "..." — ustawia jego treść.
rodzic.appendChild(dziecko) — wstawia utworzony element na koniec wskazanego rodzica, DOPIERO wtedy staje się widoczny.
element.remove() — usuwa element ze strony całkowicie.

Typowy wzorzec: masz tablicę danych (np. produktów w koszyku), a dla KAŻDEGO elementu tablicy tworzysz nowy fragment HTML pętlą for...of i dodajesz go do strony — to jest dokładnie mechanizm, który za chwilę (dział PHP, Lekcja 17) zobaczysz po stronie serwera, tylko generujący HTML w PHP zamiast w przeglądarce.

Przykład z życia

Kiedy dodajesz produkt do koszyka w sklepie internetowym i lista koszyka natychmiast pokazuje nową pozycję bez przeładowania strony — to właśnie createElement + appendChild w akcji.

Kod (JavaScript)

<ul id="listaKoszyka"></ul>
<button id="przyciskDodaj">Dodaj przykładowy film do listy</button>

<script>
    const koszyk = ["Podróż w czasie", "Ostatni bastion"];
    const lista = document.getElementById("listaKoszyka");

    function odswiezListe() {
        // najpierw czyścimy starą zawartość listy
        lista.innerHTML = "";

        for (const tytul of koszyk) {
            const nowyElement = document.createElement("li");
            nowyElement.textContent = tytul;
            lista.appendChild(nowyElement);
        }
    }

    document.getElementById("przyciskDodaj").addEventListener("click", function () {
        koszyk.push("Cichy ocean"); // dodanie elementu do tablicy
        odswiezListe();
    });

    odswiezListe(); // wyświetlenie listy od razu po wczytaniu strony
</script>

Komentarz i wyjaśnienie kodu

Funkcja odswiezListe() najpierw CZYŚCI listę (lista.innerHTML = ""), a dopiero potem buduje ją od nowa na podstawie aktualnej zawartości tablicy koszyk — to prosty, ale bardzo skuteczny wzorzec: zamiast ręcznie dodawać/usuwać pojedyncze elementy, po każdej zmianie danych po prostu "przerysowujesz" całą listę na nowo. Metoda push() dodaje nowy element na koniec tablicy JavaScript, dokładnie jak $tablica[] = ... w PHP.

Ćwiczenie samodzielne

Zbuduj listę <ul>, do której przycisk dodaje nowy element tekstowy przy każdym kliknięciu.

Zadania do pracy własnej

Dodaj do przykładu z tej lekcji przycisk "Wyczyść koszyk", który ustawia tablicę koszyk na pustą i odświeża listę.
Rozbuduj listę koszyka tak, żeby przy każdej pozycji pojawił się przycisk "Usuń", który usuwa TĘ KONKRETNĄ pozycję z tablicy (metoda splice() albo filter()) i odświeża widok.
Zbuduj kompletną, działającą po stronie przeglądarki wersję koszyka: tablica obiektów {tytul, cena}, dynamicznie generowana lista pozycji z ceną przy każdej, licznik łącznej wartości koszyka aktualizowany po każdej zmianie, oraz przycisk "Dodaj" dodający nowy przykładowy film — to dokładny odpowiednik funkcjonalności, którą w Lekcji 17 działu PHP zbudujesz od nowa, ale zapisując dane w sesji PHP zamiast w zwykłej tablicy JavaScript (żeby przetrwały przeładowanie strony).

Typowe błędy

Częsty błąd to tworzenie nowego elementu (createElement) i zapomnienie o appendChild — element istnieje "w pamięci", ale nigdy nie pojawia się na stronie. Drugi błąd: czyszczenie listy przez innerHTML = "" i budowanie jej od nowa przy KAŻDEJ, nawet najmniejszej zmianie w bardzo dużych listach — dla małych list (jak koszyk) to nie problem, ale warto wiedzieć, że to podejście ma swoje granice wydajności. Trzeci: mylenie modyfikacji tablicy JavaScript (push, splice) z automatycznym odświeżeniem widoku — w przeciwieństwie do niektórych frameworków (React, Angular — wspomnianych w podstawie programowej), zwykły JavaScript NIE aktualizuje strony automatycznie po zmianie tablicy, trzeba to zrobić ręcznie, tak jak funkcja odswiezListe().

Nawiązanie do egzaminu zawodowego

To pogłębienie efektu INF.03.5.3.6 ("korzysta z funkcji modelu DOM") o dynamiczne tworzenie treści — technikę bezpośrednio wykorzystywaną też przez wymienione w podstawie programowej biblioteki/frameworki jQuery, Angular i React (INF.03.5.3.7), które automatyzują dokładnie ten proces.