Клони карданчии элементҳо дар 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>

Инпут дода шудааст. Тугма дода шудааст. Бо пахш кардан ба тугма ин инпутро клон кунед.