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

Дадзены інпут. Дадзена кнопка. Па націсканні на кнопку клануйце гэты інпут.