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

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

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

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

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

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

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

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

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

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