Создание элементов

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Метод принимает имя тега строкой и возвращает настоящий DOM-узел: с полным набором свойств, методов и будущих обработчиков. Внутри у него пусто, родителя нет, на экране его тоже нет — но это уже полноценный <button>, а не заготовка.

js

const button = document.createElement("button");

console.log(button.tagName);
console.log(button.outerHTML);
console.log(button.isConnected);

страница примера

Сначала предположите, что выведет код

Регистр имени тега не важен: createElement("DIV") и createElement("div") дают один и тот же элемент. Пишите строчными — так принято, а tagName всё равно вернёт заглавные буквы, это наследие HTML.

Ошибки не будет: браузер создаст HTMLUnknownElement — узел без своего поведения, но вставляемый и стилизуемый. А вот SVG так не сделать: createElement всегда работает в пространстве имён HTML, для графики нужен createElementNS.

js

const widget = document.createElement("widget");
console.log(widget.constructor.name);

const fake = document.createElement("circle");
console.log(fake instanceof SVGElement);

const real = document.createElementNS("http://www.w3.org/2000/svg", "circle");
console.log(real instanceof SVGElement);

страница примера

Сначала предположите, что выведет код

Дальше элемент обычный: textContent кладёт внутрь текст, className и id — свойства, setAttribute и dataset — всё остальное. Порядок не важен, всё это происходит в памяти, до всякой вставки.

js

const card = document.createElement("div");
card.className = "card";
card.id = "card-1";
card.textContent = "Привет";

document.getElementById("box").append(card);

console.log(document.getElementById("box").innerHTML);

страница примера

Сначала предположите, что выведет код

Соблазн написать innerHTML вместо всего этого велик, и разница принципиальна: textContent кладёт строку как текст, innerHTML разбирает её как разметку. Одна и та же строка даёт в первом случае ноль дочерних элементов, во втором — настоящий тег.

js

const safe = document.createElement("p");
safe.textContent = "<b>жирный?</b>";

const parsed = document.createElement("p");
parsed.innerHTML = "<b>жирный!</b>";

document.getElementById("a").append(safe);
document.getElementById("b").append(parsed);

console.log(safe.children.length);
console.log(parsed.children.length);
console.log(safe.textContent);

страница примера

Сначала предположите, что выведет код

Присваивание innerHTML не правит существующие узлы, а выбрасывает их и парсит содержимое заново. Внешне разметка та же, но узлы другие — вместе со старыми узлами исчезают их обработчики и любые ссылки на них в вашем коде.

js

const host = document.getElementById("host");
let clicks = 0;

document.getElementById("btn").addEventListener("click", () => {
  clicks += 1;
});

document.getElementById("btn").click();
console.log(clicks);

host.innerHTML = host.innerHTML;

document.getElementById("btn").click();
console.log(clicks);

страница примера

Сначала предположите, что выведет код

Текст в DOM живёт не «внутри» элемента абстрактно, а в отдельном узле — Text. Обычно его создают за вас: присвоили textContent — браузер сам сделал текстовый узел. Но его можно собрать и руками: document.createTextNode возвращает узел с nodeType 3, без тега и без атрибутов.

js

const text = document.createTextNode("просто текст");
console.log(text.nodeType);
console.log(text.nodeValue);

const p = document.createElement("p");
p.append(text);
document.getElementById("out").append(p);

console.log(p.outerHTML);

страница примера

Сначала предположите, что выведет код

Главное свойство такого узла: строка в нём остаётся строкой навсегда. Что бы вы туда ни положили — угловые скобки, амперсанды, кусок чужого HTML, — это будет показано как символы. Когда данные пришли от пользователя или из сети, это ровно то, что нужно.

js

const p = document.createElement("p");
p.append(document.createTextNode("5 < 7 & 8 > 2"));
document.getElementById("escaped").append(p);

console.log(p.textContent);
console.log(p.outerHTML);

страница примера

Сначала предположите, что выведет код

Способ	Что делает со строкой	Когда брать
elem.textContent = s	Заменяет всё содержимое одним текстовым узлом	Почти всегда, когда нужен текст
elem.append(s)	Добавляет текстовый узел в конец, не трогая остальное	Когда текст соседствует с элементами
document.createTextNode(s)	Возвращает узел, вставку делаете сами	Когда узел нужен как значение: сохранить, переместить
elem.innerHTML = s	Разбирает строку как разметку	Только для разметки, которую написали вы сами

Созданный элемент не принадлежит документу. Он существует как значение в переменной, у него нет родителя, его не найдёт querySelector, и браузеру нечего рисовать: на экран попадает только то, что висит в дереве документа. Такой узел называют отсоединённым (detached), и проверяется это одним свойством — isConnected.

js

const el = document.createElement("div");
el.textContent = "я существую";

console.log(el.isConnected);
console.log(el.parentNode);
console.log(document.querySelector("#mount div"));

document.getElementById("mount").append(el);

console.log(el.isConnected);
console.log(document.querySelector("#mount div").textContent);

страница примера

Сначала предположите, что выведет код

У отсоединённого узла нет и геометрии: он нигде не расположен, поэтому все измерения дают нули, а правила CSS к нему не применяются — каскаду не от чего считать, у элемента нет предков в документе.

js

const box = document.createElement("div");
box.textContent = "текст";

console.log(box.offsetWidth);

document.body.append(box);

console.log(box.offsetWidth > 0);

страница примера

Сначала предположите, что выведет код

Отсюда классическая ошибка: создали элемент, тут же померили ширину, получили 0 и полчаса ищете виноватого в CSS. Мерить можно только после вставки — до неё мерить попросту нечего.

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

js

const list = document.createElement("ul");

for (const name of ["Первый", "Второй", "Третий"]) {
  const item = document.createElement("li");
  item.textContent = name;
  list.append(item); // страница ещё не знает об этом
}

document.getElementById("mount").append(list); // один контакт с документом

console.log(list.children.length);
console.log(document.querySelectorAll("#mount li")[1].textContent);

страница примера

Сначала предположите, что выведет код

Формально ничто не запрещает вставить пустой <ul> первым и дополнять его уже в документе — результат будет тот же. Но привычка «сначала собрал, потом вставил» бесплатна, а выигрывает всегда. О самих способах вставки — append, prepend, before, after — подробно в следующей статье.

document.createElement("div") возвращает полноценный элемент, живущий в памяти: без родителя, без места в документе и без пикселей на экране.
Наполняют его как обычный узел — textContent, className, setAttribute; innerHTML отличается тем, что разбирает строку как разметку и пересобирает содержимое заново.
createTextNode делает текстовый узел (nodeType 3) отдельным значением: строка в нём навсегда остаётся текстом, что и нужно для чужих данных.
Пока isConnected равен false, элемент не найдётся селектором и не имеет размеров — измерять его бессмысленно до вставки.
Собирать поддерево целиком и вставлять одним вызовом дешевле, чем добавлять узлы по одному в живую страницу.

1/3Элемент создан через createElement, но ещё не вставлен. Что вернёт его parentNode?

2/3Что выведет console.log(p.children.length) после p.textContent = "<b>привет</b>"?

3/3Зачем нужен document.createTextNode, если есть textContent?

Соберите карточку

Напишите функцию createCard(title, text), которая создаёт и возвращает структуру <div class="card"><h3>заголовок</h3><p>текст</p></div>. Внутрь функции вставка в документ не входит — она только собирает узел. Проверьте, что до вставки карточка не найдена на странице, а после — найдена.

js

function createCard(title, text) {
  // ваш код
}

const card = createCard("Заголовок", "Текст карточки");
console.log(card.isConnected); // false

document.getElementById("mount").append(card);
console.log(document.querySelector("#mount .card h3").textContent); // Заголовок

страница примера

Сначала предположите, что выведет код

Собираем три элемента и связываем их до вставки: заголовок и абзац кладём в контейнер, контейнер возвращаем наружу.

jsлистинг · не запускается

function createCard(title, text) {
  const card = document.createElement("div");
  card.className = "card";

  const heading = document.createElement("h3");
  heading.textContent = title;

  const body = document.createElement("p");
  body.textContent = text;

  card.append(heading, body);
  return card;
}

const card = createCard("Заголовок", "Текст карточки");
console.log(card.isConnected); // false
console.log(card.outerHTML);
// <div class="card"><h3>Заголовок</h3><p>Текст карточки</p></div>

document.getElementById("mount").append(card);
console.log(card.isConnected); // true

function createCard(title, text) {
  const card = document.createElement("div");
  card.className = "card";

  const heading = document.createElement("h3");
  heading.textContent = title;

  const body = document.createElement("p");
  body.textContent = text;

  card.append(heading, body);
  return card;
}

const card = createCard("Заголовок", "Текст карточки");
console.log(card.isConnected); // false
console.log(card.outerHTML);
// <div class="card"><h3>Заголовок</h3><p>Текст карточки</p></div>

document.getElementById("mount").append(card);
console.log(card.isConnected); // true

append принимает сразу несколько узлов, поэтому заголовок и абзац добавляются одним вызовом. Функция ничего не знает о месте вставки — за это отвечает вызывающий код, и такую функцию проще переиспользовать.

Покажите разметку как текст

В переменной userInput лежит строка, пришедшая от пользователя. Выведите её в <div id="log"> так, чтобы теги внутри строки остались видимыми символами, а не превратились в элементы. Проверьте результат по числу дочерних элементов.

js

const userInput = "<img src=x> и <script>плохое</script>";

// ваш код: вставьте userInput в #log как текст

console.log(document.getElementById("log").children.length); // 0 — ни один тег не стал элементом

страница примера

Сначала предположите, что выведет код

Любой из двух путей годится — важно лишь не отдавать строку парсеру:

jsлистинг · не запускается

const userInput = "<img src=x> и <script>плохое</script>";
const log = document.getElementById("log");

log.append(document.createTextNode(userInput));

console.log(log.children.length); // 0 — ни один тег не стал элементом
console.log(log.textContent === userInput); // true — строка дошла символ в символ

const userInput = "<img src=x> и <script>плохое</script>";
const log = document.getElementById("log");

log.append(document.createTextNode(userInput));

console.log(log.children.length); // 0 — ни один тег не стал элементом
console.log(log.textContent === userInput); // true — строка дошла символ в символ

Короче — log.textContent = userInput: результат тот же, браузер сам создаст текстовый узел. Ошибочный вариант здесь один — innerHTML: он разберёт строку как разметку, и в документе появится настоящий <img> с битым адресом.

Создание элементов

Видеоразбор темы за 5–7 минут

document.createElementЭлемент из воздуха, пока вне страницы

Наполняем содержимымТекст, классы и атрибуты нового узла

createTextNodeТекст — тоже полноправный узел дерева

Почему элемента не видноСоздан — ещё не значит вставлен

Собрать целиком, вставить один разДерево в памяти обходится дешевле

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Соберите карточку

Покажите разметку как текст