W budowie
JavaScript w przeglądarce · Moduł 11

Dynamiczne tworzenie i usuwanie elementów DOM

Tworzenie węzłów przez createElement, dołączanie za pomocą appendChild, generowanie struktur w pętli, czyszczenie innerHTML oraz metoda remove().

  • 45 min
  • 16 slajdów
  • Notatki nauczyciela: N
  • Strona modułu: otwórz
Plan · 45 min

Co dziś robimy

  1. 12 minTworzenie i dołączanie elementów createElement Nowo utworzony element istnieje początkowo wyłącznie w pamięci operacyjnej przeglądarki i…
  2. 12 minGenerowanie struktur w pętli i czyszczenie kontenera Kluczową zasadą higieny interfejsu przed ponownym generowaniem treści (np.
  3. 12 minUsuwanie elementów z drzewa dokumentu Gdy przycisk usuwania znajduje się wewnątrz usuwanego wiersza (np.
  4. 4 minĆwiczenia 16 zadań w module — wybierz 3–4 na lekcję
  5. 5 minPodsumowanie bilet wyjściowy i zadanie domowe
Atom 1 z 3 · ~12 min

Tworzenie i dołączanie elementów createElement

Dynamiczne rozbudowywanie strony o nowe pozycje (np. dodawanie wpisów na forum, kolejnych zadań czy produktów) opiera się na tworzeniu węzłów DOM za pomocą metody document.createElement(nazwaZnacznika) .

  • Nowo utworzony element istnieje początkowo wyłącznie w pamięci operacyjnej przeglądarki i nie jest jeszcze widoczny w oknie strony.
  • Przed dołączeniem go do dokumentu konfigurujemy jego właściwości: przypisujemy tekst za pomocą element.textContent , nadajemy klasy CSS przez element.className lub…
  • Aby element pojawił się w strukturze strony, musimy wstawić go do wybranego kontenera nadrzędnego (np.
  • listy <ul> lub bloku <div> ) za pomocą metody rodzic.appendChild(nowyElement) .
Kod · atom 1 · ~3 min

Jak to wygląda w kodzie

function dodajNowyWpis() {
  const pole = document.getElementById('trescWpisu');
  const tekst = pole.value.trim();

  if (tekst === '') {
    alert('Wpis nie może być pusty!');
    return;
  }

  const lista = document.getElementById('listaWiadomosci');
  const nowyWpis = document.createElement('li');
  nowyWpis.textContent = tekst;

  lista.appendChild(nowyWpis);
  pole.value = '';
}
Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

function dodajNowyWpis() {
  const pole = document.getElementById('trescWpisu');
  const tekst = pole.value.trim();

  if (tekst === '') {
    alert('Wpis nie może być pusty!');
    return;
  }

  const lista = document.getElementById('listaWiadomosci');
  const nowyWpis = document.createElement('li');
  nowyWpis.textContent = tekst;

  lista.appendChild(nowyWpis);
  pole.value = '';
}
Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

Która metoda służy do utworzenia nowego węzła elementu w pamięci przeglądarki?

Atom 2 z 3 · ~12 min

Generowanie struktur w pętli i czyszczenie kontenera

Przy budowaniu katalogów produktów, cenników czy tabel z danymi najczęściej powtarzamy operację tworzenia elementów w pętli (np. metodą tablica.forEach() ).

  • Kluczową zasadą higieny interfejsu przed ponownym generowaniem treści (np.
  • po kliknięciu przycisku odświeżenia lub zmiany filtra) jest wyczyszczenie dotychczasowej zawartości kontenera .
  • Gdy liczba elementów nie wynika z tablicy, lecz z wartości podanej przez użytkownika, wygodniej użyć klasycznej pętli for z licznikiem.
  • Nagłówek pętli ma trzy części: inicjalizację licznika, warunek wykonywania i krok po każdym obrocie — blok powtarza się tak długo, jak warunek jest prawdziwy:
Kod · atom 2 · ~3 min

Jak to wygląda w kodzie

const uslugi = [
  { nazwa: 'Instalacja systemu', cena: 80 },
  { nazwa: 'Czyszczenie układu', cena: 120 },
  { nazwa: 'Odzyskiwanie danych', cena: 250 }
];

function generujKartyUslug() {
  const kontener = document.getElementById('kontenerUslug');
  kontener.innerHTML = '';

  uslugi.forEach(function(u) {
    const karta = document.createElement('div');
    karta.className = 'karta-uslugi';

    const tytul = document.createElement('h4');
    tytul.textContent = u.nazwa;

    const cena = document.createElement('p');
    cena.className = 'cena';
    cena.textContent = u.cena + ' zł';

    karta.appendChild(tytul);
    karta.appendChild(cena);
    kontener.appendChild(karta);
  });
}

function wyczyscKatalog() {
  document.getElementById('kontenerUslug').innerHTML = '';
}
Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

const uslugi = [
  { nazwa: 'Instalacja systemu', cena: 80 },
  { nazwa: 'Czyszczenie układu', cena: 120 },
  { nazwa: 'Odzyskiwanie danych', cena: 250 }
];

function generujKartyUslug() {
  const kontener = document.getElementById('kontenerUslug');
  kontener.innerHTML = '';

  uslugi.forEach(function(u) {
    const karta = document.createElement('div');
    karta.className = 'karta-uslugi';

    const tytul = document.createElement('h4');
    tytul.textContent = u.nazwa;

    const cena = document.createElement('p');
    cena.className = 'cena';
    cena.textContent = u.cena + ' zł';

    karta.appendChild(tytul);
    karta.appendChild(cena);
    kontener.appendChild(karta);
  });
}

function wyczyscKatalog() {
  document.getElementById('kontenerUslug').innerHTML = '';
}
Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

W jaki sposób najszybciej usunąć całą dotychczasową zawartość kontenera przed ponownym wygenerowaniem elementów?

Atom 3 z 3 · ~12 min

Usuwanie elementów z drzewa dokumentu

Usuwanie elementów jest nieodzownym elementem interfejsów takich jak koszyki zakupowe czy listy zadań. Nowoczesny standard DOM udostępnia prostą metodę element.remove() , którą wywołujemy bezpośrednio na węźle, który ma zniknąć ze strony.

  • Gdy przycisk usuwania znajduje się wewnątrz usuwanego wiersza (np.
  • w elemencie <li> ), możemy przekazać referencję do klikniętego przycisku za pomocą słowa kluczowego this w atrybucie zdarzenia: onclick="usunPozycje(this)" .
  • Po usunięciu węzła warto zaktualizować stan powiązanych liczników na stronie (np.
  • zliczając pozostałe elementy za pomocą document.querySelectorAll('ul li').length ) lub przeliczyć sumę zamówienia.
Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

function usunPozycje(przycisk) {
  const elementLi = przycisk.parentElement;
  elementLi.remove();

  const pozostalo = document.querySelectorAll('#listaKoszyka li').length;
  const licznik = document.getElementById('licznikKoszyka');

  licznik.textContent = 'Pozycji w koszyku: ' + pozostalo;
}
Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

function usunPozycje(przycisk) {
  const elementLi = przycisk.parentElement;
  elementLi.remove();

  const pozostalo = document.querySelectorAll('#listaKoszyka li').length;
  const licznik = document.getElementById('licznikKoszyka');

  licznik.textContent = 'Pozycji w koszyku: ' + pozostalo;
}
Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

Która nowoczesna metoda pozwala na bezpośrednie usunięcie elementu węzła ze strony?

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

  • Nowo utworzony element istnieje początkowo wyłącznie w pamięci operacyjnej przeglądarki i nie jest jeszcze widoczny w oknie strony.
  • Kluczową zasadą higieny interfejsu przed ponownym generowaniem treści (np.
  • Gdy przycisk usuwania znajduje się wewnątrz usuwanego wiersza (np.
Bilet wyjściowy: Jaka starsza metoda usuwania węzła wywoływana na elemencie nadrzędnym jest w pełni równoważna metodzie remove?
Odpowiedź: d) Metoda rodzic.removeChild(dziecko)
Hyżyk· Dynamiczne tworzenie i usuwanie elementów DOM moduł 1 / 1