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