JavaScript တွင် အစိတ်အပိုင်းများ ပွားယူခြင်း

ဤသင်ခန်းစာတွင် အစိတ်အပိုင်းများ၏ မိတ္တူများ ရယူခြင်းကို သင်ယူပါမည်။ ဤမိတ္တူများကို ပုံမှန်အစိတ်အပိုင်းများကဲ့သို့ ကိုင်တွယ်နိုင်သည် - ၎င်းတို့ကို ပြုပြင်ပြောင်းလဲခြင်းနှင့် စာမျက်နှာ၏ လိုအပ်သောနေရာတွင် ထည့်သွင်းခြင်းတို့ ပြုလုပ်နိုင်သည်။ အစိတ်အပိုင်းများ၏ မိတ္တူများရယူသည့် လုပ်ငန်းစဉ်ကိ် ပွားယူခြင်း (cloning) ဟုခေါ်သည်။

အစိတ်အပိုင်းတစ်ခုကို cloneNode method ကိုအသုံးပြု၍ ပွားယူနိုင်သည်။ ဤ method ထဲသို့ true သို့မဟုတ် false ကို parameter အဖြစ် ပေးပို့ရမည်။ true ပေးပို့ပါက အစိတ်အပိုင်းသည် attribute အားလုံးနှင့် ကလေးအစိတ်အပိုင်းများနှင့်အတူ အပြည့်အဝ ပွားယူခံရပြီး၊ false ပေးပို့ပါက အစိတ်အပိုင်း ကိုယ်တိုင်သာ ဖြစ်သည်။

ဥပမာတစ်ခုဖြင့် ကြည့်ရအောင်။ ကျွန်ုပ်တို့တွင် အောက်ပါကုဒ်ရှိသည်ဟု ဆိုကြပါစို့:

<div id="parent">
	<div class="elem">
		<p>ပထမ စာပိုဒ်</p>
		<p>ဒုတိယ စာပိုဒ်</p>
	</div>
</div>

elem class ရှိ block ၏ မိတ္တူတစ်ခုကို ဖန်တီးပြီး #parent block ၏ နောက်ဆုံးတွင် ထည့်သွင်းကြမည်:

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

let clone = elem.cloneNode(true);
parent.appendChild(clone);

ရလဒ်အနေဖြင့် အောက်ပါအတိုင်း ဖြစ်လာမည်:

<div id="parent">
	<div class="elem">
		<p>ပထမ စာပိုဒ်</p>
		<p>ဒုတိယ စာပိုဒ်</p>
	</div>
	<div class="elem">
		<p>ပထမ စာပိုဒ်</p>
		<p>ဒုတိယ စာပိုဒ်</p>
	</div>
</div>

input တစ်ခု ပေးထားသည်။ button တစ်ခု ပေးထားသည်။ button ကို နှိပ်လိုက်သောအခါ ထို input ကို ပွားယူပါ။