Метод cloneNode() в JavaScript

Антон Шепель Мар 20, 2023 • 1 мин чтения

Метод cloneNode() в JavaScript позволяет создать точную копию узла (элемента) DOM-дерева, на котором он вызывается. Это может быть полезно, когда вам нужно создать копию элемента для дальнейшей модификации, без необходимости создавать новый элемент и повторно устанавливать все его свойства.

Синтаксис метода cloneNode() выглядит следующим образом:

var copyNode = originalNode.cloneNode(deep);

Здесь originalNode — это узел DOM, который вы хотите скопировать, а deep — это опциональный параметр, который указывает, нужно ли копировать также и все поддерево узла. Если вы установите значение true, будут скопированы все вложенные узлы, включая дочерние элементы, а если установить значение false — будут скопированы только сам элемент, без его дочерних элементов.

Пример:

<div id="original">
  <h1>Заголовок</h1>
  <p>Текст</p>
</div>

var originalNode = document.getElementById("original");
var copyNode = originalNode.cloneNode(true);
document.body.appendChild(copyNode);

В этом примере мы создаем копию элемента div с id="original", включая его дочерние элементы h1 и p, и добавляем ее в конец тела документа.

Обратите внимание, что скопированный узел не будет иметь идентификатора (id) или обработчиков событий, назначенных на оригинальный узел. Если вам нужно скопировать и эти свойства, вам нужно будет установить их вручную для скопированного узла.