Stvaranje HTML Elemenata s document.createElement() u JavaScriptu

Ako ste se ikada zapitali kako dinamično dodati elemente na web stranicu koristeći JavaScript, odgovor je u jednostavnoj, ali moćnoj metodi: document.createElement().

Kloniraj lekciju

Što je document.createElement()?

document.createElement() je metoda koja omogućuje kreiranje novih HTML elemenata direktno kroz JavaScript. Bez ponovnog učitavanja stranice, možete dodati sve što poželite — od običnih <div> elemenata do prilagođenih HTML komponenti.

Kako radi?

Sintaksa:

createElement(tagName)
createElement(tagName, options)

Parametri:

1. tagName: String koji određuje vrstu HTML elementa koji želite stvoriti (npr. "div", "p", "span").
2. options (opcionalno): Objekt koji sadrži dodatne informacije poput prilagođenih komponenti definiranih pomoću customElements.define().

Povratna vrijednost:

Metoda vraća novi HTMLElement, spreman za manipulaciju ili umetanje u DOM.

Primjer: Dinamičko dodavanje sadržaja

Zamislimo situaciju: imate praznu web stranicu s jednim postojećim <div> elementom. Želite dodati novu poruku “Pozdrav svijete!” izravno ispod.

Evo kako to postižete!

document.body.onload = addElement;

function addElement() {
  // Kreiranje novog <div> elementa
  const newDiv = document.createElement("div");

  // Dodavanje tekstualnog čvora s porukom
  const newContent = document.createTextNode("Pozdrav svijete!");

  // Spajanje teksta s <div> elementom
  newDiv.appendChild(newContent);

  // Ubacivanje novog elementa prije postojećeg <div>-a
  const currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}

Detaljno objašnjenje koda korak po korak:

1. document.body.onload = addElement;
   Ova linija postavlja funkciju addElement da se pozove automatski kada se cijelo tijelo HTML dokumenta učita. Drugim riječima, čekamo da sve u dokumentu bude spremno prije nego što počnemo s dodavanjem novih elemenata.
2. function addElement() {
   Počinje definicija funkcije addElement, koja sadrži logiku za kreiranje i dodavanje novih elemenata na stranicu.
3. const newDiv = document.createElement("div");
   Kreira potpuno novi HTML element <div>. Taj element još nije dio stranice — trenutno postoji samo u memoriji.
4. const newContent = document.createTextNode("Pozdrav svijete!");
   Kreira tekstualni čvor s tekstom "Pozdrav svijete!". Ovaj tekstualni čvor je odvojen od HTML elementa i ne prikazuje se dok ga ne dodamo u neki HTML element.
5. newDiv.appendChild(newContent);
   Povezuje tekstualni čvor newContent s novokreiranim <div> elementom newDiv. Sada naš <div> sadrži tekst “Pozdrav svijete!”.
6. const currentDiv = document.getElementById("div1");
   Dohvaća referencu na postojeći <div> element s id-jem "div1", koji se već nalazi na stranici. Ova referenca će nam pomoći da znamo gdje dodati novi element.
7. document.body.insertBefore(newDiv, currentDiv);
   Ubacuje novokreirani <div> (s tekstom “Pozdrav svijete!”) neposredno prije postojećeg <div> elementa currentDiv. Na taj način, naš novi element postaje vidljiv na stranici.

Što se događa na kraju?

Rezultat je da se novi element s tekstom “Pozdrav svijete!” pojavi na stranici, smješten iznad elementa s id-jem "div1". 🚀

Ključna stvar koju treba zapamtiti:

Metoda document.createElement() je moćan alat za dinamičko manipuliranje stranicom. Kombiniranjem s metodama poput appendChild i insertBefore, možete stvoriti interaktivne i dinamične web aplikacije!