Крім редагування існуючих елементів, DOM-інтерфейс дозволяє видаляти або створювати нові елементи на сторінці. Це відкриває широкі можливості при створенні гарних динамічних сторінок. Нижче наведені методи для роботи з документом в цьому напрямку.
видалення вузлів
removeChild ()
Для видалення вузлів використовується метод removeChild ().
З назви видно, що даний метод видаляє дочірній вузол. Тобто метод removeChild () необхідно викликати на тому елементі, який є батьківським для видаляється вузла.
Метод removeChild () повертає посилання на віддалений об'єкт. З цим вузлом згодом можна працювати.
Щоб не шукати окремо посилання на видаляється елемент і його батька, можна скористатися відносної посиланням на батьківський вузол. Нижче наведено приклад, в якому створюється видаляє метод remove () для вузлів елементів. Він викликається безпосередньо на удаляемом елементі.
Створення нових вузлів
Нові вузли DOM моделі створюються дуже просто. Для цього використовуються вбудовані методи об'єкта document.
клонування вузлів
Ще один варіант створення вузла - це клонування вже існуючого. Це буває корисно, коли необхідно створювати складні, але однотипні вузли.
cloneNode ()
Для клонування вузлів використовується метод cloneNode ().
element. cloneNode (глибина) глибина логічне значення, яке вказує глибину клонування. Якщо аргумент має значення true. то буде виконано повне клонування даного елемента - з усіма атрибутами і вкладеними вузлами. Якщо вказати false. то елемент скопіюється без дочірніх вузлів, але з усіма атрибутами. Даний аргумент необов'язковий, але його бажано вказувати завжди, так як різні браузери можуть використовувати різні значення за замовчуванням.
Використання cloneNode () може привести до появи в документі елементів з однаковим унікальним ідентифікатором id або ім'ям name.
Якщо вихідний елемент має атрибут id або name. тоді перед вставкою в документ необхідно змінити ці атрибути у елемента-клону.
Додавання вузлів
Методи, що додають нові вузли в структуру документа, повинні викликатися на тому елементі, всередину якого необхідно провести вставку (тобто він буде батьківським по відношенню до вставляється елементу).
appendChild ()
Найпростіший метод для вставки нового вузла в документ - це appendChild (). Він вставляє новий вузол в кінець батьківського елемента. Вставляється вузол стає останнім у списку дочірніх вузлів елемента.
insertBefore ()
Інший метод для додавання вузла в документ - insertBefore ().
Даний метод більш універсальний. Він дозволяє вставити елемент в будь-яке місце серед інших дочірніх елементів, а не тільки в кінець батька.
replaceChild ()
Ще один спосіб додати елемент на сторінку - скористатися методом replaceChild (). Він поєднує в собі відразу два дії: видаляє один вузол і вставляє на його місце новий.
Метод повертає посилання на віддалений вузол.
insertAdjacentHTML ()
Додати новий вузол в документ можна простий вставкою HTML-коду у вигляді рядка. Для цього використовується метод insertAdjacentHTML ().
parent. insertAdjacentHTML (місце вставки, HTML-код) місце вставки Позиція, куди необхідно вставити код. Це місце вказується щодо самого елемента і може мати одне з наступних значень:- beforebegin - безпосередньо перед відкриває тегом.
- afterbegin - відразу після відкриваючого тега.
- beforeend - безпосередньо перед закриває тегом.
- afterend - відразу після закриває тега.
Даний метод не перезавантажує наявне вміст елемента, тому працює набагато швидше, ніж використання властивості innerHTML.
переміщення вузлів
Описані вище методи, що додають нові вузли в DOM структуру документа, можуть застосовуватися і для переміщення вже наявних. Для цього просто як аргумент треба вказати той вузол, який необхідно перемістити. Зазначений елемент автоматично буде вилучений зі свого місця і вставлений в нове.
Для копіювання елемента (а не переміщення) попередньо необхідно створити його клон за допомогою методу cloneNode ().