Elemek létrehozása és beszúrása JavaScripttel

Most megtanuljuk, hogyan hozhatunk létre új DOM elemeket JavaScripten keresztül, majd hogyan adhatjuk hozzá őket az oldalhoz. Erre szolgál a createElement metódus. Ennek a metódusnak a paramétereként annak a tag-nek a nevét kell megadni, amelyet létre kell hozni.

Ha a createElement eredményét egy változóba írjuk, akkor abban a változóban olyan elem lesz, mintha a querySelector segítségével kaptuk volna meg.

Az egyetlen különbség - az elemünk nem lesz elhelyezve az oldalon. De így megváltoztathatjuk a szövegét, attribútumait, eseménykezelőket helyezhetünk rá, és végül elhelyezhetjük az oldalon.

Az új elem oldalon való elhelyezésére a appendChild metódust alkalmazzuk. Ezt a metódust arra az elemre kell alkalmazni, amelybe be szeretnénk helyezni az elemünket. A metódus paramétereként pedig az új elemünket kell átadni, amelyet korábban a createElement segítségével hoztunk létre.

Nézzünk egy gyakorlati példát. Tegyük fel, hogy van egy div-ünk, és benne néhány bekezdés:

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

Hozzunk létre egy bekezdést, állítsuk be a szövegét, és helyezzük el az oldalon a #parent blokk végére:

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

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

parent.appendChild(p);

A kód végrehajtásának eredménye:

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>