Клонирование элемента в js (JavaScript) - Smart-Frontend

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

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


Клонирование элемента в 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() отлично поддерживается всеми современными браузерами.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *