Javascript - dom додавання і видалення вузлів, ит шеф

На цьому уроці ми навчимося створювати вузли-елементи (createElement) і текстові вузли (createTextNode). А також розглянемо методи, призначені для додавання вузлів до дерева (appendChild. InsertBefore) і для видалення вузлів з дерева (removeChild).







Додавання вузлів до дерева

Додавання нового вузла до дерева зазвичай здійснюється в 2 етапи:

  1. Створити необхідний вузол, використовуючи один з наступних методів:
    • createElement () - створює елемент (вузол) з вказаним ім'ям (тегом). Метод createElement (element) має один обов'язковий параметр (element) - це рядок, що містить ім'я створюваного елемент (тега). Вказувати ім'я елемента (тега) в параметрі необхідно великими літерами. Як результат даний метод повертає елемент, який був створений.
    • createTextNode () - створює текстовий вузол із зазначеним текстом. Метод createTextNode (text) має один обов'язковий параметр (text) - це рядок, що містить текст текстового вузла. Як результат даний метод повертає текстовий вузол, який був створений.
  2. Вказати місце в дереві, куди необхідно вставити вузол. Для цього необхідно скористатися одним з таких методів:
    • appendChild () - додає вузол як останній дочірній вузол елемента, для якого викликається даний метод. Метод appendChild (node) має один обов'язковий параметр це вузол (node), який Ви хочете додати. Як результат даний метод повертає доданий вузол.
    • insertBefore () - вставляє вузол як дочірній вузол елемента, для якого викликається даний метод. Метод insertBefore (newNode, existingNode) має два параметри: newNode (обов'язковий) - вузол, який Ви хочете додати, existingNode (не обов'язково) - це дочірній вузол елемента перед яким, необхідно вставити вузол. Якщо другий параметр (existingNode) й вказати, то даний метод вставить його в кінець, тобто в якості останнього дочірнього вузла елемента для якого викликається даний метод. Як результат метод insertBefore () повертає вставлений вузол.






Для цього необхідно виконати наступне:

Методи appendChild () і insertBefore () при роботі з існуючими вузлами

Робота з існуючими вузлами методами appendChild () і insertBefore () також здійснюється в 2 етапи:

  1. Отримати існуючий вузол в дереві.
  2. Вказати місце, куди необхідно вставити вузол, за допомогою методу appendChild () або insertBefore (). При цьому вузол буде видалений з попереднього місця.

Наприклад, додати існуючий елемент li. що містить текст "Планшет" в початок списку (при цьому він буде видалений з попереднього місця):

видалення вузлів

Видалення вузла з дерева здійснюється в 2 етапи:

  1. Отримати (знайти) цей вузол в дереві. Ця дія зазвичай здійснюється одним з наступних методів: getElementById (). getElementsByClassName (). getElementsByTagName (). getElementsByName (). querySelector () або querySelectorAll ().
  2. Викликати у батьківського вузла метод removeChild (). якому в якості параметра необхідно передати вузол, який ми хочемо у нього видалити.
    Метод removeChild () повертає як значення віддалений вузол або null. якщо вузол, який ми хотіли видалити, не існував.

Наприклад, видалити останній дочірній елемент у елемента, що має id = "myID".

Наприклад, видалити всі дочірні вузли у елемента, що має id = "myQuestion":







Схожі статті