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

Дато је поље за унос. Дато је дугме. При клику на дугме клонирајте ово поље за унос.