Клонаванне элементаў на 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>