Vytváření a vkládání elementů v JavaScriptu

Nyní se naučíme vytvářet nové DOM elementy pomocí JavaScriptu a poté je přidávat na stránku. K tomu slouží metoda createElement. Parametrem této metody by měl být název tagu, který má být vytvořen.

Pokud výsledek práce createElement zapíšeme do proměnné, bude v této proměnné prvek, jako bychom jej získali pomocí querySelector.

Jediný rozdíl je v tom, že náš prvek nebude umístěn na stránce. Jinak mu můžeme měnit text, atributy, přidávat obslužné funkce událostí a nakonec jej umístit na stránku.

Pro umístění nového prvku na stránku se používá metoda appendChild. Tuto metodu je třeba aplikovat na prvek, do kterého chceme náš prvek vložit. A parametrem metody by měl být náš nový prvek, dříve vytvořený pomocí createElement.

Podívejme se na praktický příklad. Předpokládejme, že máme div a v něm několik odstavců:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Vytvořme odstavec, nastavme mu text a umístěme jej na stránku na konec bloku #parent:

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Výsledek provedení kódu:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

Je dán ol:

<ol id="elem"></ol>

Vložte na jeho konec li s textem 'item'.

Je dán ol a tlačítko:

<ol id="elem"></ol>
<button id="button">click me</button>

Zařiďte, aby po kliknutí na tlačítko byl na konec seznamu přidán li s textem 'item'.