JavaScriptda elementlarni klonlash

Ushbu darsda biz elementlarning nusxalarini olishni o'rganamiz. Ushbu nusxalar bilan oddiy elementlar bilan ishlagandek ishlash mumkin - ularni o'zgartirish va sahifaning kerakli joyiga joylashtirish. Elementlarning nusxalarini olish jarayoni klonlash deb ataladi.

Elementni cloneNode metodi yordamida klonlash mumkin. Ushbu metodga parametr sifatida true yoki false beriladi. Agar true berilsa, element butunlay, barcha atributlari va vorinchi elementlari bilan birga klonlanadi, agar false berilsa - faqat o'zi klonlanadi.

Keling, misol orqali ko'rib chiqaylik. Faraz qilaylik, bizda quyidagi kod mavjud:

<div id="parent">
	<div class="elem">
		<p>birinchi abzas</p>
		<p>ikkinchi abzas</p>
	</div>
</div>

elem klassiga ega bo'lgan blokning nusxasini yaratamiz va uni #parent blokining oxiriga joylashtiramiz:

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

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

Natijada quyidagi hosil bo'ladi:

<div id="parent">
	<div class="elem">
		<p>birinchi abzas</p>
		<p>ikkinchi abzas</p>
	</div>
	<div class="elem">
		<p>birinchi abzas</p>
		<p>ikkinchi abzas</p>
	</div>
</div>

Input berilgan. Tugma berilgan. Tugma bosilganda ushbu inputni klonlang.