ජාවාස්ක්‍රිප්ට් මගින් අංග සෑදීම හා ඇතුල් කිරීම

දැන් අපි ජාවාස්ක්‍රිප්ට් මගින් නව 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>

එයට අවසානයේ li පෙළ සමඟ 'item' ඇතුල් කරන්න.

ol සහ බොත්තමක් ලබා දී ඇත:

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

බොත්තම ක්ලික් කළ විට ලැයිස්තුවේ අවසානයට li පෙළ සමඟ 'item' එකතු වන පරිදි සකසන්න.