Элементҳоро дар JavaScript эҷод кардан ва гузоштан

Акнун мо меомӯзем, ки чӣ гуна элементҳои нави DOM-ро тавассути JavaScript эҷод кунем, ва сипас онҳоро ба саҳифа илова кунем. Барои ин методҳои 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">click me</button>

Чунон кунед, ки пас аз клик кардан ба тугма ба охири рӯйхат li бо матни 'item' илова карда шавад.