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

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

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

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

parent.appendChild(p);

Výsledek provedení 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>