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 մեթոդը,
որի օգնությամբ կարելի է ստեղծել նոր էլեմենտ