Метод cloneNode

Метод cloneNode элементни клонлаш ва унинг айнан бир хил нусхасини олиш имконини беради. Бу нусхани кейин prepend, append, appendChild, insertBefore ёки insertAdjacentElement методлари ёрдамида саҳифага қўйиш мумкин.

Метод параметр сифатида true ёки false қабул қилади. Агар true берилса, элемент барча атрибутлари ва фарзанд элементлари билан бирга тўлиқ клонланади, агар false берилса - фақат элементнинг ўзи (фарзанд элементларисз) клонланади.

Синтаксис

элемент.cloneNode(true ёки false);

Мисол

elem синфига эга блокнинг нусхасини чиқарамиз ва уни #parent блокнинг охирига қўямиз:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

let parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
parent.appendChild(clone);

Кодни ишга тушириш натижаси:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

Мисол

Олинган клон билан оддий элемент каби ишлаш мумкин:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

let parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'new text1';
clone.children[1].textContent = 'new text2';

parent.appendChild(clone);

Кодни ишга тушириш натижаси:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>new text1</p>
		<p>new text2</p>
	</div>
</div>

Қуйидагиларни ҳам кўриб чиқинг

createElement метожи,
уннинг ёрдамида янги элемент яратиш мумкин