Креирање и вметнување елементи во JavaScript

Сега ќе научиме како да креираме нови DOM елементи преку JavaScript, а потоа да ги додадеме на страницата. За ова е наменет методот createElement. Како параметар на овој метод треба да се пренесе името на тагот кој треба да се креира.

Ако резултатот од работата на createElement се запише во променлива, тогаш во таа променлива ќе има таков елемент, како да сме го добиле преку querySelector.

Единствената разлика - нашиот елемент нема да биде сместен на страницата. Но, можеме да му го менуваме текстот, атрибутите, да додаваме обработувачи на настани и на крајот да го сместиме на страницата.

За сместување на нов елемент на страницата се применува методот appendChild. Овој метод треба да се примени на оној елемент, во кој сакаме да го сместиме нашиот елемент. А како параметар на методот треба да се пренесе нашиот нов елемент, креиран претходно преку createElement.

Да го погледнеме практичниот пример. Нека имаме div, а во него - неколку параграфи:

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

Ајде да креираме параграф, да му го поставиме текстот и да го сместиме на страницата на крајот од блокот #parent:

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

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

parent.appendChild(p);

Резултат од извршувањето на кодот:

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

Даден е ol:

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

Вметнете му на крајот li со текст 'item'.

Дадени се ol и копче:

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

Направете така што при клик на копчето на крајот од листата да се додава li со текст 'item'.