Elementų kūrimas ir įterpimas naudojant JavaScript

Dabar mes išmoksime kurti naujus DOM elementus per JavaScript, o tada juos pridėti į puslapį. Tam skirtas metodas createElement. Šio metodo parametru reikia perduoti kuriamo elemento pavadinimą.

Jei createElement metodo rezultatą įrašysime į kintamąjį, tai šiame kintamajame bus toks elementas, tarsi mes jį gautume per querySelector.

Vienintelis skirtumas - mūsų elementas nebus įdėtas į puslapį. Tačiau mes galime keisti jo tekstą, atributus, pridėti įvykių tvarkytuvus ir galiausiai įdėti jį į puslapį.

Norint įdėti naują elementą į puslapį, naudojamas metodas appendChild. Šis metodas turi būti taikomas tam elementui, į kurį mes norime įdėti mūsų elementą. O metodo parametru reikia perduoti mūsų naujai sukurtą elementą, sukurtą anksčiau naudojant createElement.

Pažiūrėkime praktiniu pavyzdžiu. Tarkime kad turime div, o jame - kelis paragrafus:

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

Sukurkime paragrafą, nustatykime jam tekstą ir įdėkime į puslapį į bloko #parent pabaigą:

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

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

parent.appendChild(p);

Kodo vykdymo rezultatas:

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

Duotas ol:

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

Įterpkite jam į pabaigą li su tekstu 'item'.

Duotas ol ir mygtukas:

<ol id="elem"></ol>
<button id="button">spausk mane</button>

Padarykite taip, kad paspaudus mygtuką sąrašo pabaigoje būtų pridėtas li su tekstu 'item'.