Справочник JavaScript

append(): добавляем узлы в DOM

append() добавляет один или несколько узлов или строк в конец элемента. appendChild() принимает только один Node и возвращает добавленный узел.

Рабочий пример

const list = document.querySelector(".list");
const item = document.createElement("li");
item.textContent = "Новая тема";
list.append(item);

Если добавить уже существующий узел, он переместится, а не скопируется. Для копии нужен cloneNode, а для вставки в начало — prepend().

Когда применять

Собирай содержимое элемента до добавления в документ. При большом количестве строк используй DocumentFragment, чтобы код явно формировал одну пачку изменений.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Ожидать копию при повторном append одного узла
• Передавать строку в appendChild
• Добавлять элементы не в тот найденный контейнер