textContent, innerHTML, innerText

textContent, innerHTML и innerText — три свойства для чтения и записи содержимого DOM-элемента, отличающихся тем, как они интерпретируют разметку, видимость и стили.

Зачем нужно

Выбор правильного свойства влияет на безопасность (XSS), производительность и корректность результата. textContent — безопасная запись текста; innerHTML — вставка HTML-разметки; innerText — текст «как пользователь его видит», с учётом CSS.

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

  • textContent — безопасное обновление текста (счётчики, подписи, метки)
  • innerHTML — рендеринг HTML-шаблонов (осторожно с XSS)
  • innerText — чтение видимого текста для копирования/передачи

Сравнение свойств

textContent innerHTML innerText
Возвращает Сырой текст со всеми узлами HTML-строку Видимый текст
Интерпретирует HTML Нет Да Нет
Учитывает CSS (display:none) Нет Нет Да
Производительность Высокая Средняя Медленная
XSS при записи Безопасно Опасно Безопасно

Примеры

textContent

const p = document.querySelector('p');

// Чтение: весь текст включая скрытые элементы
console.log(p.textContent); // "Привет мир" (без тегов)

// Запись: безопасно, HTML-символы экранируются
p.textContent = '<b>Текст</b>'; // отобразится как литерал, а не жирный
p.textContent = 'Счётчик: 42'; // просто текст

innerHTML

const container = document.querySelector('.card');

// Чтение: HTML-разметка
console.log(container.innerHTML); // "<h2>Заголовок</h2><p>Текст</p>"

// Запись: разбирает HTML
container.innerHTML = '<h2>Новый заголовок</h2><p>Новый текст</p>';

// ОПАСНО: пользовательский ввод без очистки
const userInput = '<img src=x onerror="alert(1)">';
container.innerHTML = userInput; // XSS!

// БЕЗОПАСНО: текстовые данные через textContent
const safeEl = document.createElement('p');
safeEl.textContent = userInput; // вставит как текст, не выполнит
container.append(safeEl);

innerText

// HTML: <p>Видимый <span style="display:none">Скрытый</span> текст</p>
const p = document.querySelector('p');

console.log(p.textContent); // "Видимый Скрытый текст" (включает скрытый)
console.log(p.innerText);   // "Видимый текст" (только видимое)

// Учитывает переносы строк (br, блочные элементы)
// Вызывает reflow — медленнее чем textContent

Очистка элемента

// Быстрая очистка содержимого
element.textContent = '';  // удаляет все дочерние узлы
element.innerHTML = '';    // то же, но медленнее

// Альтернатива для большого дерева
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

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

  • innerHTML с пользовательским вводом — главный источник XSS; используйте textContent или явно санируйте строку через DOMPurify.
  • Использование innerText для производительной итерации — вызывает принудительный reflow; в циклах предпочтительнее textContent.
  • Запись через innerHTML += — перестраивает весь DOM поддерева, сбрасывает обработчики событий; используйте insertAdjacentHTML или append.

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

Ресурсы