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