JavaScriptте элементтерди түзүү жана киргизүү

Азыр биз JavaScript аркылуу жаңы DOM элементтерди түзүүнү жана андан кийин аларды баракка кошууну үйрөнөбүз. Бул үчүн 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'.