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>

Инпут берілген. Батырма берілген. Батырманы басқанда осы инпутты клондаңыз.