Креирање и уметање елемената у ЈаваСкрипту

Сада ћемо научити како да креирамо нове DOM елементе преко ЈаваСкрипта, а затим да их додамо на страницу. За то је намењена метода createElement. Параметром ове методе треба проследити назив тага који треба бити креиран.

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

Једина разлика - наш елемент неће бити смештен на страници. Али можемо мењати му текст, атрибуте, додавати руковаоце догађаја и на крају сместити га на страницу.

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

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

<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">кликни ме</button>

Направите тако да при клику на дугме у крај списка додаје li са текстом 'item'.