createElement и createTextNode

document.createElement(tag) создаёт новый DOM-элемент заданного типа, а document.createTextNode(text) — текстовый узел; оба метода создают узлы в памяти, не добавляя их в документ.

Зачем нужно

Это базовые строительные блоки для программного создания DOM. В отличие от innerHTML, они безопасны к XSS (текст вставляется как данные, а не как разметка) и позволяют точно контролировать структуру, атрибуты и содержимое создаваемых элементов перед их добавлением в документ.

Где используется

  • Динамическое создание элементов списка, строк таблицы, карточек
  • Безопасная вставка пользовательского текста
  • Построение компонентов «вручную» без шаблонизатора
  • Создание HTML из данных массива или объекта

Примеры

createElement — базовое использование

// Создать элемент
const div = document.createElement('div');
div.className = 'card';
div.id = 'card-1';

// Установить атрибуты
div.setAttribute('role', 'article');

// Добавить содержимое
div.textContent = 'Привет, мир!';

// Добавить в документ
document.body.append(div);

createTextNode — безопасная вставка текста

const userInput = '<script>alert("XSS")</script>';

const p = document.createElement('p');
// createTextNode экранирует HTML-символы
const textNode = document.createTextNode(userInput);
p.appendChild(textNode);
document.body.append(p);
// На странице отобразится буквально: <script>alert("XSS")</script>

Построение списка из массива

function renderList(items) {
  const ul = document.createElement('ul');
  ul.className = 'todo-list';

  items.forEach(item => {
    const li = document.createElement('li');
    li.className = 'todo-item';

    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.checked = item.done;

    const text = document.createTextNode(item.text());

    li.append(checkbox, text);
    ul.append(li);
  });

  return ul;
}

const todos = [
  { text: 'Изучить DOM', done: true },
  { text: 'Написать тесты', done: false },
];

document.querySelector('.container').append(renderList(todos));

Создание с DocumentFragment (оптимизация)

// Вставка множества элементов через фрагмент — один reflow
const fragment = document.createDocumentFragment;

for (let i = 1; i <= 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Элемент ${i}`;
  fragment.append(li);
}

document.querySelector('ul').append(fragment);

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

  • Не добавить элемент в DOM — созданный узел существует только в памяти до явного вызова append/insertBefore/etc.
  • Использовать innerHTML вместо createTextNode для пользовательского ввода — innerHTML выполняет HTML; createTextNode безопасен.
  • Забыть добавить дочерние узлы перед вставкой родителя — порядок не критичен для итогового результата, но лучше собирать дерево до вставки в документ во избежание лишних reflow.

Связанные темы

Ресурсы