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 әдісі,
оның көмегімен жаңа элемент жасауға болады