Vytváranie a vkladanie prvkov v JavaScripte

Teraz sa naučíme vytvárať nové DOM prvky prostredníctvom JavaScriptu a potom ich pridávať na stránku. Na to slúži metóda createElement. Parametrom tejto metódy by malo byť meno tagu, ktorý má byť vytvorený.

Ak výsledok práce createElement zapíšeme do premennej, tak v tejto premennej bude prvok, akoby sme ho získali cez querySelector.

Jediný rozdiel je v tom, že náš prvok nebude umiestnený na stránke. Inak mu môžeme meniť text, atribúty, pridávať mu obsluhy udalostí a nakoniec ho umiestniť na stránku.

Na umiestnenie nového prvku na stránku sa používa metóda appendChild. Túto metódu by sme mali aplikovať na ten prvok, do ktorého chceme vložiť náš prvok. A parametrom metódy by mal byť náš nový prvok, vytvorený predtým cez createElement.

Pozrime sa na praktický príklad. Nech máme div a v ňom - niekoľko odsekov:

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

Vytvorme odsek, nastavme mu text a umiestnime ho na stránku na koniec bloku #parent:

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

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

parent.appendChild(p);

Výsledok vykonania kódu:

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

Daný ol:

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

Vložte mu na koniec li s textom 'item'.

Daný ol a tlačidlo:

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

Zaistite, aby sa po kliknutí na tlačidlo na koniec zoznamu pridalo li s textom 'item'.