Page 119 - 6108

А як би вставити в інший вузол схоже повідомлення?
Звичайно, можна зробити функцію для генерації повідомлень і помістити
туди цей код, але в ряді випадків набагато ефективніше – клонувати існуючий
елемент, а потім змінити текст всередині. Зокрема, якщо елемент великий, то
клонувати його буде набагато швидше, ніж перестворити.
Метод elem.cloneNode(true) створить «глибоку» копію елемента -
разом з атрибутами, включаючи піделементи. Якщо ж викликати метод з
аргументом false, то копія буде зроблена без дочірніх елементів. Це потрібно
набагато рідше.

let p = document.getElementById("para1");
let p_prime = p.cloneNode(true);

Клонування вузлів копіює всі атрибути і їх значення, в тому числі власні
обробники подій. Але не копіює обробники подій, додані через метод
addEventListener() або ті, що призначені через властивості елемента (тобто
node.onclick = function).
Дублікат вузла, повернутого cloneNode() не є частиною документа, поки
не буде додано до іншого вузол, який є частиною документа, використовуючи
Node.appendChild() або інший метод. Крім того, він не має батька, поки не

буде додано до іншого вузла.
Якщо вихідний вузол має ідентифікатор і клон розміщений в тому ж
документі, ідентифікатор повинен бути змінений, для того що б бути
унікальним. Ім'я атрибута також може потребувати зміни, в залежності від
майбутнього імені дубліката.
Видалення вузлів
Для видалення вузла є два методи:
parentElem.removeChild(elem)

видаляє elem зі списку дітей parentElem.

parentElem.replaceChild(newElem, elem)
серед дітей parentElem видаляє elem і вставляє на його місце newElem.
Видалений дочірній елемент залишається в пам'яті, але більше не є
частиною DOM. Можна повторно використовувати видалений елемент.
Якщо elem не є дочірнім елементом parentElem, тоді метод генерує

виняток. Також це відбувається якщо elem є дочірнім елементом parentElem
під час виклику методу, але був вилучений під час виклику обробника подій,
що видаляє елемент (тобто при видаленні елемента безпосередньо перед
викликом обробника подій).

// видалення елемента з відомим предком
let d = document.getElementById("top");
let d_nested = document.getElementById("nested");
let throwawayNode = d.removeChild(d_nested);
// Видалення всіх дочірних елементів
let element = document.getElementById("top");
while (element.firstChild) {
element.removeChild(element.firstChild);
}