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:

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

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

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

parent.appendChild(p);

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

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

Adott egy ol:

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

Szúrjon be a végére egy li elemet a 'item' szöveggel.

Adott egy ol és egy gomb:

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

Állítsa be úgy, hogy a gombra kattintva a lista végéhez adjon hozzá egy li elemet a 'item' szöveggel.