Клонирование элемента в js (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);Глубокое клонирование
По умолчанию метод cloneNode() создает неглубокую копию. То есть копирует сам элемент без дочерних узлов. Для создания глубокой копии необходимо передать в метод true в качестве аргумента.
// Создаем глубокую копию const deepCopy = el.cloneNode(true); // Выводим в консоль результат console.log(deepCopy);
Кроссбраузерность
Метод cloneNode() отлично поддерживается всеми современными браузерами.
