Metod createElement

Metod createElement omogućava kreiranje novog elementa prosleđivanjem imena taga kao parametra. Nakon kreiranja, sa elementom se može raditi kao sa običnim elementom, a takođe se može dodati na stranicu metodama prepend, append, appendChild, insertBefore ili insertAdjacentElement.

Ako se rezultat rada createElement upise u promenljivu, u toj promenljivoj će biti element kao da smo ga dobili putem querySelector ili getElementById. Jedina razlika je što naš element neće biti postavljen na stranici. Inače, možemo mu menjati innerHTML, atribute, dodavati osluškivače dogadjaja i na kraju ga postaviti na stranicu.

Sintaksa

document.createElement('ime taga');

Primer

Hajde da kreiramo pasus, postavimo mu tekst i postavimo ga na stranicu na kraju bloka #parent:

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

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

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

parent.appendChild(p);

Rezultat izvršavanja koda:

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

Primer

Dat je ul. Hajde da u njemu postavimo 9 tagova li, i da njihov tekst budu redni brojevi:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

Rezultat izvršavanja koda:

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

Primer

Hajde da prilikom umetanja elemenata vezujemo za njih osluškivače dogadjaja:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	
	li.addEventListener('click', function() {
		alert(this.textContent);
	});
	
	parent.appendChild(li);
};

Pogledajte takođe

metod cloneNode,
pomoću koga se može klonirati element
metod createTextNode,
pomoću koga se može kreirati novi tekstualni čvor