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 = 'жаңы текст1';
clone.children[1].textContent = 'жаңы текст2';

parent.appendChild(clone);

Кодду иштетүүнүн натыйжасы:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>жаңы текст1</p>
		<p>жаңы текст2</p>
	</div>
</div>

Ошондой эле караңыз

createElement методу,
жардамы менен жаңы элемент түзүүгө болот