cloneNode metodu

cloneNode metodu elementi klonlamaq və onun dəqiq surətini almağa imkan verir. Bu surəti daha sonra səhifəyə prepend, append, appendChild, insertBefore və ya insertAdjacentElement metodları ilə daxil etmək olar.

Metod parametr kimi true və ya false qəbul edir. Əgər true ötürülərsə, element bütün atributları və alt elementləri ilə birlikdə tam klonlanır, əgər false ötürülərsə - yalnız özü (alt elementləri olmadan) klonlanır.

Sintaksis

element.cloneNode(true ve ya false);

Nümunə

elem sinifli blokun surətini çıxaraq və onu #parent blokunun sonuna daxil edək:

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

Kodun icrasının nəticəsi:

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

Nümunə

Alınan klonla adi element kimi işləmək olar:

<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 = 'yeni text1';
clone.children[1].textContent = 'yeni text2';

parent.appendChild(clone);

Kodun icrasının nəticəsi:

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

Həmçinin bax

createElement metodu,
köməyi ilə yeni element yaratmaq olar