Տարրերի կլոնավորումը JavaScript-ում

Այս դասում մենք կսովորենք ստանալ տարրերի պատճեններ: Այս պատճեններով հնարավոր կլինի աշխատել, ինչպես սովորական տարրերի հետ՝ փոխել դրանք և տեղադրել էջի պահանջվող տեղում: Տարրերի պատճեններ ստանալու գործընթացը կոչվում է կլոնավորում:

Տարրը կարելի է կլոնավորել օգտագործելով cloneNode մեթոդը: Այս մեթոդին պետք է փոխանցել պարամետր՝ true կամ false: Եթե փոխանցված է true, ապա տարրը կլոնավորվում է ամբողջությամբ, միասին բոլոր ատրիբուտներով և դուստր տարրերի հետ, իսկ եթե false՝ միայն հենց տարրը:

Եկեք նայենք օրինակով: Ենթադրենք մենք ունենք հետևյալ կոդը:

<div id="parent">
	<div class="elem">
		<p>առաջին պարբերություն</p>
		<p>երկրորդ պարբերություն</p>
	</div>
</div>

Եկեք պատրաստենք elem դասով բլոկի պատճենը և տեղադրենք այն #parent բլոկի վերջում:

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

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

Արդյունքում կստացվի հետևյալը.

<div id="parent">
	<div class="elem">
		<p>առաջին պարբերություն</p>
		<p>երկրորդ պարբերություն</p>
	</div>
	<div class="elem">
		<p>առաջին պարբերություն</p>
		<p>երկրորդ պարբերություն</p>
	</div>
</div>

Տրված է input: Տրված է button: Կոճակի սեղմման դեպքում կլոնավորեք այս input-ը: