cloneNode metodi

cloneNode metodi elementni klonlash va uning aniq nusxasini olish imkonini beradi. Ushbu nusxani keyin sahifaga prepend, append, appendChild, insertBefore yoki insertAdjacentElement metodlari yordamida kiritish mumkin.

Metod parametr sifatida true yoki false qiymatini oladi. Agar true uzatilsa, element butunlay, barcha atributlari va vorin elementlari bilan birga klonlanadi, agar false uzatilsa - faqat elementning o'zi (vorin elementsiz) klonlanadi.

Sintaksis

element.cloneNode(true yoki false);

Misol

elem klassiga ega bo'lgan blokning nusxasini yaratamiz va uni #parent blokining oxiriga kiritamiz:

<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);

Kodni bajarish natijasi:

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

Misol

Olingan klon bilan oddiy element kabi ishlash mumkin:

<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);

Kodni bajarish natijasi:

<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>

Shuningdek qarang

createElement metodi,
uning yordamida yangi element yaratish mumkin