Kreiranje i umetanje elemenata u JavaScript-u

Sada ćemo naučiti kako da kreiramo nove DOM elemente preko JavaScript-a, a zatim da ih dodamo na stranicu. Za to je namenjena metoda createElement. Parametar ove metode treba da bude ime taga koji treba da bude kreiran.

Ako rezultat rada createElement zapišemo u promenljivu, onda će u toj promenljivoj biti takav element, kao da smo ga dobili preko querySelector.

Jedina razlika je - naš element neće biti postavljen na stranicu. Ali možemo da mu menjamo tekst, atribute, da dodajemo obrađivače dogadjaja i na kraju da ga postavimo na stranicu.

Za postavljanje novog elementa na stranicu primenjuje se metoda appendChild. Ovu metodu treba primeniti na onaj element, u koji želimo da smestimo naš element. A parametrom metode treba proslediti naš novi element, kreiran ranije preko createElement.

Pogledajmo na praktičnom primeru. Neka postoji div, a u njemu - nekoliko paragrafa:

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

Hajde da kreiramo paragraf, postavimo mu tekst i postavimo na stranicu na kraj bloka #parent:

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

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

parent.appendChild(p);

Rezultat izvršavanja koda:

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>