Kuunda na Kuingiza Vipengele kwa JavaScript

Sasa tutajifunza kuunda vipengele vipya vya DOM kupitia JavaScript, kisha kuviweka kwenye ukurasa. Kwa hili inatumika njia createElement. Kipimo cha njia hii kinapaswa kuwa jina la kitambulisho (tag) ambacho kinahitaji kuundwa.

Ikiwa matokeo ya createElement utaandika kwenye kibadilishaji, basi kwenye kibadilishaji hicho kutakuwa na kipengele kama hicho, kana kwamba tumepata kupitia querySelector.

Tofauti pekee - kipengele chetu hakitawekwa kwenye ukurasa. Lakini tunaweza kubadilisha maandishi yake, sifa, kuweka wakaguaji wa matukio na mwishowe kukiweka kwenye ukurasa.

Kuweka kipengele kipya kwenye ukurasa inatumika njia appendChild. Njia hii inapaswa kutumiwa kwenye kipengele hicho, ndani yake tunataka kuweka kipengele chetu. Na kipimo cha njia kinapaswa kuwa kipengele chetu kipya, kilichoundwa mapema kupitia createElement.

Tuangalie kwa mfano wa vitendo. Hebu tuwemo na div, na ndani yake - aya kadhaa:

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

Wacha tuunde aya, tuiweke maandishi na tuiweke kwenye ukurasa mwishoni mwa kipengele #parent:

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Matokeo ya utekelezaji wa kodi:

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

Amepewa ol:

<ol id="elem"></ol>

Muingizie mwishoni li yenye maandishi 'item'.

Amepewa ol na kifungo:

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

Fanya ili kubonyeza kwenye kifungo mwishoni mwa orodha kiongezwe li yenye maandishi 'item'.