JS метод Element.appendChild()

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

appendChild() дозволяє додавати вузол (елемент або текстовий вузол) як останнього дочірнього вузла іншого вузла. Цей метод широко використовується у веброзробці для маніпуляції з DOM (Document Object Model) та динамічного створення або модифікації структури веб-сторінки. Він забезпечує гнучкий та потужний спосіб керування вмістом веб-сторінок та додатків.

Метод appendChild() приймає один аргумент - вузол, який потрібно додати як дочірній. Якщо вузол, який додається, вже є частиною документа, він буде автоматично вилучений зі свого поточного місця та переміщений у нове місце. Ось простий приклад використання appendChild():

const newElement = document.createElement('div');
newElement.textContent = 'Новий елемент';

const container = document.querySelector('.container');
container.appendChild(newElement);

У цьому прикладі ми створюємо новий елемент div за допомогою document.createElement('div'), встановлюємо його текстовий вміст за допомогою textContent, знаходимо контейнер .container за допомогою document.querySelector('.container') та додаємо новий елемент як останнього дочірнього вузла контейнера за допомогою appendChild().

appendChild() також можна використовувати для переміщення існуючих вузлів у новому місці. Наприклад:

const existingElement = document.querySelector('.existing');
const newContainer = document.querySelector('.new-container');

newContainer.appendChild(existingElement);

У цьому прикладі ми знаходимо існуючий елемент .existing та новий контейнер .new-container, після чого переміщуємо існуючий елемент як останнього дочірнього вузла нового контейнера за допомогою appendChild().

appendChild() можна використовувати для створення складних ієрархічних структур DOM шляхом послідовного додавання дочірніх вузлів. Наприклад:

const ul = document.createElement('ul');

const li1 = document.createElement('li');
li1.textContent = 'Пункт 1';
ul.appendChild(li1);

const li2 = document.createElement('li');
li2.textContent = 'Пункт 2';
ul.appendChild(li2);

const container = document.querySelector('.container');
container.appendChild(ul);

У цьому прикладі ми створюємо невпорядкований список ul та два елементи списку li1 та li2. Спочатку ми додаємо li1 та li2 як дочірні вузли ul за допомогою appendChild(), а потім додаємо ul як дочірній вузол контейнера .container.

Важливо пам'ятати, що appendChild() додає вузол як останнього дочірнього вузла. Якщо потрібно вставити вузол у певне місце всередині батьківського вузла, можна використати метод insertBefore().

Підсумовуючи, appendChild() є потужним інструментом для маніпуляції з DOM у JavaScript. Він дозволяє динамічно створювати, змінювати та переміщувати вузли в структурі документа, що є ключовим для створення інтерактивних та адаптивних веб-додатків.

Синтаксис

appendChild(aChild)

Параметри

*aChild

Вузол, який додається до вказаного батьківського вузла (зазвичай елемент).

Return

node

Повертає вузол, який є доданим дочірнім вузлом (aChild), за винятком випадку, коли aChild є DocumentFragment, в такому випадку повертається пустий DocumentFragment.

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Створюємо новий елемент div
const newElement = document.createElement('div');
newElement.textContent = 'Новий елемент';

// Знаходимо контейнер, до якого потрібно додати новий елемент
const container = document.querySelector('.container');

// Додаємо новий елемент як останнього дочірнього вузла контейнера
container.appendChild(newElement);

// Масив елементів для списку
const items = ['Елемент 1', 'Елемент 2', 'Елемент 3', 'Елемент 4', 'Елемент 5'];

// Створюємо DocumentFragment для тимчасового зберігання вузлів
const fragment = document.createDocumentFragment();

// Створюємо елементи списку та додаємо їх до DocumentFragment
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  fragment.appendChild(li);
});

// Знаходимо контейнер, до якого потрібно додати список
const container = document.querySelector('.container');

// Створюємо елемент ul
const ul = document.createElement('ul');

// Додаємо всі елементи списку з DocumentFragment до ul
ul.appendChild(fragment);

// Додаємо ul як останнього дочірнього вузла контейнера
container.appendChild(ul);