Ustvarjanje in vstavljanje elementov v JavaScript

Zdaj se bomo naučili ustvarjati nove DOM elemente prek JavaScript in jih nato dodajati na stran. Za to je namenjena metoda createElement. Parameter te metode je ime oznake, ki naj bo ustvarjena.

Če rezultat delovanja createElement zapišemo v spremenljivko, bo v tej spremenljivki tak element, kot da bi ga dobili prek querySelector.

Edina razlika - naš element ne bo nameščen na strani. Sicer pa mu lahko spreminjamo besedilo, atribute, dodajamo ročjevalnike dogodkov in na koncu ga namestimo na stran.

Za namestitev novega elementa na stran se uporablja metoda appendChild. To metodo je treba uporabiti za element, v katerega želimo postaviti naš element. Parameter metode pa naj bo naš novi element, prej ustvarjen prek createElement.

Poglejmo praktični primer. Naj imamo div, v njem pa več odstavkov:

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

Ustvarimo odstavek, nastavimo mu besedilo in ga postavimo na stran konec bloka #parent:

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

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

parent.appendChild(p);

Rezultat izvajanja kode:

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

Podan ol:

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

Vstavite mu na konec li z besedilom 'item'.

Podan ol in gumb:

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

Naredite tako, da se ob kliku na gumb na konec seznama doda li z besedilom 'item'.