Njia ya cloneNode

Njia cloneNode inaruhusu kuiga kipengele na kupata nakala yake kamili. Hii nakala kisha inaweza kuingizwa kwenye ukurasa kwa msaada wa njia prepend, append, appendChild, insertBefore au insertAdjacentElement.

Kwenye kigezo hupata true au false. Ikiwa true imepitishwa, basi kipengele kinaigwa kikamilifu, pamoja na sifa zote na vipengele vinavyotegemea, na ikiwa false - tu kipengele chenyewe (bila vipengele vinavyotegemea).

Mtindo

kipengele.cloneNode(true au false);

Mfano

Tutafanya nakala ya kizuia chenye klas elem na kukiingiza mwishoni mwa kizuia #parent:

<div id="parent">
	<div class="elem">
		<p>maandishi1</p>
		<p>maandishi2</p>
	</div>
</div>

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

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

Matokeo ya utekelezaji wa kodi:

<div id="parent">
	<div class="elem">
		<p>maandishi1</p>
		<p>maandishi2</p>
	</div>
	<div class="elem">
		<p>maandishi1</p>
		<p>maandishi2</p>
	</div>
</div>

Mfano

Kwa kiliigwa kilichopatikana kunaweza kufanywa kazi kama kipengele cha kawaida:

<div id="parent">
	<div class="elem">
		<p>maandishi1</p>
		<p>maandishi2</p>
	</div>
</div>

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

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'maandishi mapya1';
clone.children[1].textContent = 'maandishi mapya2';

parent.appendChild(clone);

Matokeo ya utekelezaji wa kodi:

<div id="parent">
	<div class="elem">
		<p>maandishi1</p>
		<p>maandishi2</p>
	</div>
	<div class="elem">
		<p>maandishi mapya1</p>
		<p>maandishi mapya2</p>
	</div>
</div>

Angalia pia

njia createElement,
kwa msaada ambao unaweza kuunda kipengele kipya