Vytváření prvků

Zatím jste měnili prvky, které už byly v index.html. JavaScript ale umí vytvářet i nové. Dobrým příkladem jsou seznamy. Seznam je v HTML prvek ul a každá jeho položka je v něm prvek li:

<ul id="ovoce">
    <li>Jablko</li>
    <li>Hruška</li>
</ul>

Přidání položky má tři kroky:

const seznamOvoce = document.querySelector("#ovoce");

const polozka = document.createElement("li");
polozka.textContent = "Banán";
seznamOvoce.append(polozka);

1. document.createElement("li") vytvoří nový prvek li. Zatím existuje jen v programu, na stránce ještě není.
2. textContent mu nastaví text.
3. seznamOvoce.append(polozka) vloží prvek do seznamu, na jeho konec. Teprve teď se objeví na stránce.

Seznam má teď tři položky: Jablko, Hruška a Banán. Častou chybou je zapomenout na poslední krok: prvek se vytvoří, ale nikdo ho nevloží do stránky, a tak není vidět.

Každá nová položka potřebuje vlastní createElement(). Prvek může být na stránce jen jednou: když tentýž prvek přidáte pomocí append() znovu, nevznikne kopie, prvek se jen přesune na konec. Když má tedy tlačítko při každém kliknutí přidat novou položku, vytvářejte prvek uvnitř obsluhy.

Na internetu se často setkáte s vlastností innerHTML, která do prvku vkládá obsah. S textem, který napsal uživatel, ji nepoužívejte: text by se četl jako HTML, takže by mohl rozbít stránku, nebo dokonce spustit kód, který do něj někdo podstrčil. createElement() a textContent ukážou text vždy jen jako text.