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

Дан инпут. Дана кнопка. По нажатию на кнопку клонируйте этот инпут.