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:

html<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:

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

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

parent.appendChild(p);

Výsledok vykonania kódu:

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

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

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