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