JS метод Element.cloneNode()

Загальний опис

Метод cloneNode() у вузлах (Node) в JavaScript використовується для створення копії вузла. Цей метод створює глибоку копію вузла разом з усіма його дочірніми вузлами та їхніми атрибутами. Основна суть цього методу полягає в можливості швидкого створення копії вузла без необхідності вручну копіювати кожен атрибут або дочірній вузол.

Простий приклад використання методу cloneNode() може виглядати так:

const originalNode = document.getElementById('original');
const clonedNode = originalNode.cloneNode(true);

document.body.appendChild(clonedNode);

У цьому прикладі, використовуючи cloneNode(), ми створюємо копію вузла з ідентифікатором "original" та додаємо його до кінця документу. Параметр true вказує, що ми хочемо створити глибоку копію вузла разом з усіма його дочірніми вузлами.

Для більш складних випадків, коли необхідно виконати додаткові дії з копією вузла, можна використовувати цей метод разом з іншими методами для маніпулювання DOM.

const originalNode = document.getElementById('original');
const clonedNode = originalNode.cloneNode(true);

// Змінюємо якийсь атрибут копії вузла
clonedNode.setAttribute('id', 'cloned');

// Змінюємо текстовий вміст копії вузла
clonedNode.textContent = 'Це клонований вузол';

// Вставляємо клонований вузол перед оригінальним вузлом
originalNode.parentNode.insertBefore(clonedNode, originalNode);

У цьому прикладі ми спочатку створюємо копію вузла з ідентифікатором "original", потім змінюємо деякі його атрибути та текстовий вміст, і вставляємо цю копію перед оригінальним вузлом.

Таким чином, метод cloneNode() є потужним інструментом для створення копій вузлів у DOM, що дозволяє легко маніпулювати структурою документа та створювати динамічні веб-сторінки.

правити

Порада

Пам'ятайте, що cloneNode() за замовчуванням створює поверхневу копію вузла, тобто не копіює його дочірні елементи. Якщо вам потрібно також скопіювати дочірні елементи, встановіть параметр true для методу.

автор: Bond правити

Порада

Використовуйте cloneNode() для створення незалежних копій елементів, що дозволить вам змінювати їх атрибути або структуру без впливу на оригінал.

автор: Bond правити

Порада

Не забувайте прив'язувати скопійований вузол до DOM за допомогою методів вставки, якщо ви хочете, щоб він відображався на сторінці. Наприклад:

var originalNode = document.getElementById('original');
var clonedNode = originalNode.cloneNode(true);
document.body.appendChild(clonedNode);

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

cloneNode()
cloneNode(deep)

Параметри

deep

Якщо true, то вузол та його весь піддерево, включаючи текст, який може бути у дочірніх текстових вузлах, також копіюється.

автор: Bond

правити

Повернення

node

Повертає новий вузол, який був скопійований. Скопійований вузол не має батьківського вузла і не є частиною документа, поки його не буде додано до іншого вузла, який є частиною документа, за допомогою методу Node.appendChild() або аналогічного методу.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1.1	7	12	6

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div id="parentElement">Демонстраційний елемент</div>

// Отримуємо посилання на батьківський елемент, до якого потрібно додати клони.
const parentElement = document.getElementById('parentElement');

// Отримуємо всі дочірні елементи батьківського елемента.
const children = parentElement.childNodes;

// Перебираємо всі дочірні елементи та клонуємо їх.
Array.from(children).forEach(child => {
    const clonedChild = child.cloneNode(true);
    parentElement.appendChild(clonedChild);
});

<div id="parentElement">Демонстраційний елемент</div>

// Отримуємо посилання на елемент, який містить дочірні елементи.
const parentElement = document.getElementById('parentElement');

// Отримуємо всі дочірні елементи батьківського елемента.
const childNodes = parentElement.childNodes;

// Створюємо новий контейнер для збереження клонованих елементів.
const clonedElements = [];

// Перебираємо всі отримані дочірні елементи.
childNodes.forEach(childNode => {
    // Клонуємо кожен дочірній елемент та додаємо його до нового контейнера.
    const clonedElement = childNode.cloneNode(true);
    clonedElements.push(clonedElement);
});

// Додаємо всі клоновані елементи до документу.
clonedElements.forEach(clonedElement => {
    document.body.appendChild(clonedElement);
});