Úloha 3 – Dynamické prvky na stránce (tvorba a mazání seznamu)

Úvod do úlohy

Další krok v práci s DOM je dynamické vytváření a mazání prvků přímo z JavaScriptu. Tato dovednost je klíčová pro tvorbu moderních webových aplikací, kde se obsah stránky neustále mění – přidávají se položky seznamu, načítají se data z formulářů, generují galerie nebo aktualizují tabulky bez nutnosti znovu načítat celou stránku.

Pomocí metod jako createElement(), appendChild() a removeChild() dokážeme skládat HTML strukturu programově, a tím mít plnou kontrolu nad tím, co se uživateli zobrazí.

Teorie a principy

Vytvoření nového prvku

Metoda document.createElement("tag") vytvoří nový HTML element v paměti, ale zatím ho nevloží na stránku. Například:

Tím vznikne nový element <p>, který zatím nikde není vidět. Aby se objevil na stránce, musíme ho vložit do existujícího prvku pomocí metody appendChild().

Vkládání prvků

Metoda parent.appendChild(child) přidá nový uzel (například odstavec nebo obrázek) na konec obsahu rodičovského elementu.

Pokud chceme vložit více prvků najednou, je vhodné použít DocumentFragment, který slouží jako dočasný kontejner. Umožňuje přidávat velké množství elementů efektivněji, protože manipulace s fragmentem nevyvolává opakované překreslení stránky.

Odstraňování prvků

Pro odstranění použijeme parent.removeChild(child), kde parent je rodičovský element a child je uzel, který chceme smazat.
Modernější alternativa (v novějších prohlížečích) je metoda element.remove(), která odstraní daný prvek přímo.

Praktické příklady kódu

Příklad 1: Vytvoření a vložení nového odstavce

Příklad 2: Odstranění prvku

Příklad 3: Efektivní vložení více prvků pomocí DocumentFragment

Typické chyby / záludnosti

1. Vytvořený prvek se neobjeví na stránce
   → Musí být vložen pomocí appendChild() do existujícího elementu. Samotné createElement() nestačí.

2. Zapomenutý rodič při mazání
   → Metoda removeChild() vyžaduje rodičovský uzel. Pokud použijete jen element.removeChild(), vyvolá chybu. (Modernější element.remove() je jednodušší.)

3. Zbytečné překreslování stránky
   → Při přidávání většího počtu prvků používejte DocumentFragment, jinak může být kód pomalý.

4. Přepisování místo přidávání
   → Metody jako innerHTML přepíší obsah elementu, zatímco appendChild() ho rozšíří.

Shrnutí

• createElement("tag") – vytvoří nový HTML element.

• appendChild(element) – přidá nový prvek do rodiče.

• removeChild(element) – odstraní prvek z DOM.

• DocumentFragment – dočasná struktura pro hromadné a rychlé vkládání prvků.

• Vždy pracujeme s hierarchií: každý prvek musí mít svého rodiče, aby byl vidět na stránce.

Úloha

Zadání (kontext úlohy):

Vytvoř jednoduchou aplikaci, kde může uživatel přidávat nové položky do seznamu pomocí tlačítka „Přidat položku“. Každá nová položka se zobrazí jako řádek v seznamu. Po kliknutí na tlačítko „Vymazat poslední“ se odstraní poslední přidaná položka.

Cíl úlohy:

Procvičit si práci s metodami DOM – createElement(), appendChild() a removeChild(). Naučit se programově přidávat i mazat prvky na stránce.

Vstupní podmínky:

Student pracuje pouze s jedním HTML souborem.
JavaScript je vložen do <script> na konci stránky.
Položky se generují automaticky s číslováním („Položka 1“, „Položka 2“, …).

Požadovaný výstup:

• Na stránce bude:

  • nadpis „Dynamický seznam“,

  • prázdný <ul> element,

  • dvě tlačítka: „Přidat položku“ a „Vymazat poslední“.

• Po kliknutí na „Přidat položku“ se do seznamu přidá nová položka (<li>) s postupným číslem.

• Po kliknutí na „Vymazat poslední“ se smaže poslední prvek seznamu.

• Pokud už v seznamu žádné položky nejsou, mazací tlačítko zobrazí upozornění „Seznam je prázdný.“

Doplňující pokyny:

• Použij document.createElement() pro vytvoření nového <li>.

• Přidej nový prvek pomocí appendChild().

• Při mazání použij removeChild() na rodičovský element.

• Zkontroluj délku seznamu pomocí childElementCount.

• Číslování uchovávej v proměnné, kterou při každém přidání zvýšíš.

Řešení úlohy

Co je zde splněno

• Použití createElement(), appendChild() a removeChild().

• Přidávání položek s postupným číslováním.

• Kontrola počtu prvků přes childElementCount.

• Zobrazení upozornění při pokusu o smazání prázdného seznamu.

• Vše funguje bez znovunačtení stránky.

Vylepšení oproti začátečnické verzi

• Použití šipkových funkcí a inkrementace přímo v zápisu ++cislo.

• Přidána drobná kontrola s returnem místo vnořeného if/else pro čistší logiku.

• Přidáno základní CSS pro přehlednost.

• Moderní a stručný styl zápisu vhodný pro praxi.

Poznámky

• Pokud by student použil innerHTML += ..., neprocvičil by práci s DOM uzly, proto se zde používá správný způsob s createElement() a appendChild().

• Lze přidat i reset počítadla po vymazání všech položek (není nutné pro základní úlohu).