Клонирање на елементи во 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>

Даден е input. Дадено е копче. При клик на копчето клонирајте го овој input.