Стварэнне і ўстаўка элементаў на JavaScript

Цяпер мы з вамі навучымся ствараць новыя DOM элементы праз JavaScript, а затым дадаваць іх на старонку. Для гэтага прызначаны метад createElement. Параметрам гэтага метаду след перадаваць імя тэга, які павінен быць створаны.

Калі запісаць вынік працы createElement ў зменную, то ў гэтай зменнай будзе такi элемент, як быццам бы мы атрымалі яго праз querySelector.

Адзiнае адрозненне - наш элемент не будзе размешчаны на старонцы. А так мы можам мяняць яму тэкст, атрыбуты, навязваць апрацоўшчыкі падзей і ў рэшце рэшт размесцiць яго на старонцы.

Для размешчэння новага элемента на старонцы ўжываецца метад appendChild. Гэты метад след ўжываць да таго элемента, у які мы хочам змясцiць наш элемент. А параметрам метаду след перадаваць наш новы элемент, створаны раней праз createElement.

Паглядзiм на практычным прыкладзе. Хай у нас ёсць дiў, а ў iм - некалькі абзацаў:

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

Давайце створым абзац, усталюем яму тэкст i змясцiм на старонку ў канец блока #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 i кнопка:

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

Зрабiце так, каб па клiку на кнопку ў канец спiса дадаваўся li з тэкстам 'item'.