Crearea și inserarea elementelor în JavaScript

Acum vom învăța să creăm elemente DOM noi prin JavaScript, apoi să le adăugăm pe pagină. Pentru aceasta este destinată metoda createElement. Ca parametru al acestei metode ar trebui să fie transmis numele tag-ului care trebuie să fie creat.

Dacă scriem rezultatul execuției createElement într-o variabilă, atunci în acea variabilă va fi un astfel de element, ca și cum l-am fi obținut prin querySelector.

Singura diferență - elementul nostru nu va fi plasat pe pagină. În rest, putem să-i schimbăm textul, atributele, să-i atașăm handler-e de evenimente și în final să-l plasăm pe pagină.

Pentru plasarea noului element pe pagină se aplică metoda appendChild. Această metodă ar trebui aplicată elementului în care vrem să plasăm elementul nostru. Iar ca parametru metodei ar trebui să fie transmis noul nostru element, creat anterior prin createElement.

Să privim un exemplu practic. Să presupunem că avem un div, iar în el - câteva paragrafe:

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

Să creăm un paragraf, să-i setăm textul și să-l plasăm pe pagină la sfârșitul blocului #parent:

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>

Este dat ol:

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

Inserați-i la sfârșit un li cu textul 'item'.

Sunt dați ol și un buton:

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

Faceți ca la click pe buton în sfârșitul listei să se adauge un li cu textul 'item'.