JavaScript метод Node.cloneNode()

Определение и применение

JavaScript метод .cloneNode() объекта Node создает и возвращает копию узла, для которого он был вызван.

Обратите внимание, что при клонировании узла копируются все его атрибуты и их значения, включая встроенные обработчики событий. Обработчики событий, добавленные с помощью метода .addEventListener() или назначенные свойствам элемента (например, node.onclick = fn) не копируются. Более того, для элемента <canvas> нарисованное изображение не копируется.

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

Клонированный узел, возвращаемый методом .cloneNode() не имеет родителя (свойство parentNode равно null) и не является частью документа до тех пор, пока он не будет добавлен в другой узел, являющийся частью документа, например, с использованием метода appendChild().

Поддержка браузерами

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`Node.cloneNode()`	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

nodeToBeCloned.cloneNode()
nodeToBeCloned.cloneNode( deep )

nodeToBeCloned - Node
deep - Boolean

Спецификация

Document Object Model (DOM) Level 1

Значения параметров

Параметр	Описание
deep	Логическое значение, которое определяет должны ли быть клонированы дочерние элементы, или нет. Значение false определяет, что клонирован должен быть только указанный узел (поверхностная копия), значение true определяет, что дочерние элементы узла также должны быть клонированы (является значением по умолчанию). Необязательный параметр. Для пустых узлов (например, <img> и <input> элементы) не имеет значения, имеет ли параметр значение true или false.

Параметр

Описание

deep

Логическое значение, которое определяет должны ли быть клонированы дочерние элементы, или нет. Значение false определяет, что клонирован должен быть только указанный узел (поверхностная копия), значение true определяет, что дочерние элементы узла также должны быть клонированы (является значением по умолчанию). Необязательный параметр. Для пустых узлов (например, <img> и <input> элементы) не имеет значения, имеет ли параметр значение true или false.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода .cloneNode()</title>
	</head>
	<body>
		<button onclick = "myFunc()">cloneNode(true)</button> <!-- добавляем атрибут событий onclick -->
		<button onclick = "myFunc2()">cloneNode(false)</button> <!-- добавляем атрибут событий onclick -->
		<div style = "background:yellow; width:60px; height:60px;">
		      <ul>
		            <li>1</li>
		            <li>2</li>
		            <li>3</li>
		      </ul>
		</div>
		<script>
	const firstDiv = document.querySelector( "div" ); // выбираем первый элемент <div> в документе 
	
	function myFunc() {
	  const newDiv = firstDiv.cloneNode( true ); // клонируем элемент с его потомками
	  document.body.appendChild( newDiv ); // добавляем клонированный элемент элементу <body>
	}

	function myFunc2() {
	  const newDiv = firstDiv.cloneNode( false ); // поверхностно клонируем элемент
	  document.body.appendChild( newDiv ); // добавляем клонированный элемент элементу <body>
	}
		</script>
	</body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на определенную кнопку (HTML элемент <button>) вызываем функцию myFunc(), или myFunc2() которая с использованием JavaScript метода .cloneNode() клонирует элемент с его потомками в первом случае и поверхностно (только сам узел) во втором.

Для того, чтобы вставить клонированный узел в документ мы используем метод appendChild() объекта Node, он позволяет добавить узел в конец списка дочерних элементов указанного родительского узла.

Результат нашего примера:

Пример использования JavaScript метода .cloneNode()

JavaScript Node