JavaScript-те элементтерді жасау және енгізу

Қазір біз JavaScript арқылы жаңа 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>

Оның соңына мәтіні 'item' болатын li салыңыз.

ol және батырма берілген:

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

Батырманы басқан кезде тізімнің соңына мәтіні 'item' болатын li қосылатын етіп жасаңыз.