JavaScript appendChild() — додати вузол у кінець

Метод appendChild() додає вузол останнім нащадком елемента.

правити

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

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

Це не баг, а зручність: перенести елемент з одного контейнера в інший можна одним рядком, без видалення.

Сьогодні його майже витіснив append(): той приймає кілька вузлів одразу, а ще й рядки — і не треба вручну робити текстовий вузол.

правити

Порада

Копію, а не переміщення, дає appendChild(node.cloneNode(true)).

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

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

Переглядачі

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

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

Переглядач
appendChild	1+	1+	1+	7+	12+	9+

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

Переглядач
appendChild	yes	yes	yes	yes

Приклади

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

<ul id="from"><li id="item">Пункт</li></ul>
<ul id="to"></ul>

const item = document.getElementById('item');

// вузол ПЕРЕМІСТИТЬСЯ, а не скопіюється
document.getElementById('to').appendChild(item);

// потрібна копія — клонуємо
const copy = item.cloneNode(true);
copy.removeAttribute('id');
document.getElementById('from').appendChild(copy);

// сучасніше: append приймає кілька вузлів і рядки одразу
const first = document.createElement('li');
first.textContent = 'Перший';
const second = document.createElement('li');
second.textContent = 'Другий';

document.getElementById('to').append(first, second, 'просто текст');