Създаване и вмъкване на елементи в 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'.