Metoda createElement

Metoda createElement permite crearea unui element nou, trecând în parametru numele tag-ului. După creare, cu elementul se poate lucra ca cu un element obișnuit, iar acesta poate fi adăugat pe pagină cu metodele prepend, append, appendChild, insertBefore sau insertAdjacentElement.

Dacă rezultatul execuției createElement se scrie într-o variabilă, atunci în acea variabilă va fi un astfel de element, ca și cum l-am fi obținut prin querySelector sau getElementById. Singura diferență - elementul nostru nu va fi plasat pe pagină. În rest, putem schimba innerHTML-ul lui, atributele, îi putem atașa handler-e de evenimente și în final îl putem plasa pe pagină.

Sintaxă

document.createElement('numele tag-ului');

Exemplu

Să creăm un paragraf, să îi setăm textul și să îl plasăm pe pagină la sfârșitul blocului #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);

Rezultatul executării codului:

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

Exemplu

Este dat ul. Să plasăm în el 9 tag-uri li, iar textul lor să fie numerele ordinale:

<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);
}

Rezultatul executării codului:

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

Exemplu

Să atașăm elementelor handler-e de evenimente la inserare:

<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);
};

Vezi și

metoda cloneNode,
cu ajutorul căreia se poate clona un element
metoda createTextNode,
cu ajutorul căreia se poate crea un nou nod text