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() для створення складних ієрархічних структур DOM шляхом послідовного додавання дочірніх вузлів. Це може бути корисним для генерування динамічного вмісту, такого як меню, списки або дерева.

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

Порада

Якщо вам потрібно вставити вузол у певне місце всередині батьківського вузла, а не в кінець, використовуйте метод insertBefore() замість appendChild(). Наприклад:

const newElement = document.createElement('div');
const container = document.querySelector('.container');
const firstChild = container.firstChild;

// Вставляємо newElement перед першим дочірнім вузлом контейнера
container.insertBefore(newElement, firstChild);

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

Порада

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

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

// existingElement буде вилучено зі свого поточного місця
newContainer.appendChild(existingElement);

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

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

Синтаксис

appendChild(aChild)

Параметри

aChild

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

автор: Bond

правити

Повернення

node

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div class="container">перший елемент container</div>
<div class="container">другий елемент container</div>

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

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

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

<div class="container">перший елемент container</div>
<div class="container">другий елемент container</div>

// Масив елементів для списку
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);