Справочник JavaScript

createElement(): создаём элементы через JavaScript

document.createElement() создаёт новый элемент в памяти. Он появится на странице только после добавления в существующий DOM-узел.

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

const card = document.createElement("article");
card.className = "card";

const title = document.createElement("h2");
title.textContent = "Новый урок";

card.append(title);
document.querySelector(".catalog").append(card);

Сначала создаётся структура, затем задаются классы, атрибуты и текст. textContent безопасно вставляет обычную строку и не интерпретирует пользовательские данные как HTML.

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

Метод подходит для элементов, появляющихся после загрузки: уведомлений, карточек результата и строк таблицы. Большие статические фрагменты проще хранить в HTML или template.

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

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

• Использовать innerHTML для непроверенных данных
• Забывать добавить созданный узел в документ
• Создавать одинаковые элементы в цикле без DocumentFragment