# Метод cloneNode

Метод `cloneNode` позволяет клонировать элемент и получить его точную копию. Эту копию затем можно вставить на страницу с помощью методов `prepend`, `append`, `appendChild`, `insertBefore` или `insertAdjacentElement`.

В параметре метод получает `true` либо `false`. Если передан true, то элемент клонируется полностью, вместе со всем атрибутами и дочерними элементами, а если `false` - только сам элемент (без дочерних элементов).

## Синтаксис

`элемент.cloneNode(true или false);`

## Пример

Сделаем копию блока с классом `elem` и вставим его в конец блока `#parent`:

`<div id="parent"> <div class="elem"> <p>text1</p> <p>text2</p> </div> </div>` `let parent = document.getElementById('parent'); let elem = parent.querySelector('.elem'); let clone = elem.cloneNode(true); parent.appendChild(clone);`

Результат выполнения кода:

`<div id="parent"> <div class="elem"> <p>text1</p> <p>text2</p> </div> <div class="elem"> <p>text1</p> <p>text2</p> </div> </div>`

## Пример

С полученным клоном можно работать как с обычным элементом:

`<div id="parent"> <div class="elem"> <p>text1</p> <p>text2</p> </div> </div>` `let parent = document.getElementById('parent'); let elem = parent.querySelector('.elem'); let clone = elem.cloneNode(true); clone.children[0].textContent = 'new text1'; clone.children[1].textContent = 'new text2'; parent.appendChild(clone);`

Результат выполнения кода:

`<div id="parent"> <div class="elem"> <p>text1</p> <p>text2</p> </div> <div class="elem"> <p>new text1</p> <p>new text2</p> </div> </div>`

## Смотрите также

- метод `createElement`,
  с помощью которого можно создать новый элемент

←→
↑
en ru