Клонирование элемента в JavaScript

JavaScript позволяет создавать два типа копий элементов с помощью метода cloneNode(). Первый обеспечивает клонирование самого элемента, а второй — создание полной структуры с учётом всех дочерних элементов. Клонирование элемента в JavaScript (js) доступно в двух вариантах — простое и глубокое.

Простое клонирование элемента

За создание копии узла отвечает метод Node.cloneNode(). Достаточно выбрать нужный элемент и применить к нему этот метод.

В качестве примера возьмём элемент с классом element, у которого имеются некоторые свойства и вложенные (дочерние) элементы.

<div id="el" class="element" data-value>
  <h1>Hello, world!</h1>
  <p>How are you today?</p>
</div>

// Получаем нужный элемент 
const el = document.querySelector('.element'); 

// Создаем его простую копию const simpleCopy = el.cloneNode(); 

// Выводим в консоль результат 
console.log(simpleCopy);

Читайте также: Атрибуты и свойства элементов в JavaScript.

Глубокое клонирование элемента

По умолчанию метод cloneNode() создаёт неглубокую копию. То есть, копирует сам элемент без дочерних узлов. Клонирование элемента в JavaScript с целью создания глубокой копии требует передать в метод true в качестве аргумента.

// Создаем глубокую копию
const deepCopy = el.cloneNode(true);

// Выводим в консоль результат
console.log(deepCopy);

Кроссбраузерность

Метод cloneNode() отлично поддерживается всеми современными браузерами.