JavaScriptда элементларни клонлаш

Ушбу дарсда биз элементларнинг нусхаларини ошлини ўрганамиз. Ушбу нусхалар билан оддий элементлар каби ишлаш мумкин - уларни ўзгартириш ва саҳифанинг керакли жойига қидириш. Элементларнинг нусхаларини олиш жараёни клонлаш деб аталади.

Элементни cloneNode методи ёрдамида клонлаш мумкин. Ушбу методга параметр сифатида true ёки false бериш керак. Aгар true берилса, элемент тўлиқ, ҳамма атрибутлари ва ҳосса элементлари билан бирга клонланади, aгар 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>

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