JavaScript cloneNode() — копія вузла DOM

Метод cloneNode() створює копію вузла. Аргумент true копіює його разом із усіма нащадками.

правити

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

Без аргументу копіюється лише сам вузол — порожній, без вмісту. Це майже ніколи не те, чого хочуть, тож cloneNode(true) зустрічається в рази частіше.

Найважливіше, про що забувають: обробники подій не копіюються. Клон виглядає точнісінько так само, але на кліки не реагує. Атрибути (включно з onclick у розмітці) переїжджають, а те, що навішено через addEventListener(), — ні.

Той самий підступ із id: він скопіюється, і на сторінці з'явиться два елементи з однаковим id — а це вже зламаний документ.

правити

Нотатка

Клон не має обробників подій, зате має той самий id. Обидві речі доводиться виправляти вручну — саме тому для шаблонів беруть <template>.

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

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

Переглядачі

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

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

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

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

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

Приклади

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

<template id="row">
    <li class="item"><span></span></li>
</template>
<ul id="list"></ul>
<button id="demo-button">Оригінал з обробником</button>

function onClick() {
    console.log('клік по оригіналу');
}

const button = document.getElementById('demo-button');

// класичний шаблон: клонуємо вміст <template>
const template = document.getElementById('row');
const clone = template.content.cloneNode(true);

clone.querySelector('span').textContent = 'Рядок';
document.getElementById('list').append(clone);

// пастка: обробники НЕ копіюються
button.addEventListener('click', onClick);
const copy = button.cloneNode(true);
// copy на кліки не реагує — обробник треба навісити заново

// і ще одна пастка: id скопіювався разом з усім
copy.removeAttribute('id');