Ú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

Vytvořený prvek se neobjeví na stránce
→ Musí být vložen pomocí appendChild() do existujícího elementu. Samotné createElement() nestačí.
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šší.)
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ý.
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.