ელემენტების კლონირება JavaScript-ზე

ამ გაკვეთილზე ჩვენ ვისწავლით ელემენტების ასლების მიღებას. ამ ასლებთან შესაძლებელია მუშაობა ისევე, როგორც ჩვეულებრივ ელემენტებთან - მათი შეცვლა და გვერდის სასურველ ადგილას ჩასმა. ელემენტების ასლების მიღების პროცესს ეწოდება კლონირება.

ელემენტის კლონირება შესაძლებელია მეთოდის cloneNode გამოყენებით. ამ მეთოდს აუცილებელია პარამეტრად გადავცეთ true ან false. თუ გადაეცემა true, მაშინ ელემენტი სრულად კლონირდება, მთელი ატრიბუტებითა და შვილობილ ელემენტებით, ხოლო თუ false - მხოლოდ თავად ელემენტი.

მოდით, შევხედოთ მაგალითს. დავუშვათ, გვაქვს ასეთი კოდი:

<div id="parent">
	<div class="elem">
		<p>პირველი აბზაცი</p>
		<p>მეორე აბზაცი</p>
	</div>
</div>

შევქმნათ ბლოკის ასლი კლასით elem და ჩავსვათ იგი ბლოკის #parent ბოლოში:

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>

მოცემულია ინპუტი. მოცემულია ღილაკი. ღილაკზე დაწკაპუნებით დაკლონირეთ ეს ინპუტი.