Свойства innerHTML, textContent и innerText: примеры использования в DOM

Раздел: Веб-разработка -> DOM

Содержимое элементов: ключевые свойства и методы

Основной способ получения текстового содержимого

Свойство textContent возвращает текст всех дочерних узлов, включая скрытые, без интерпретации HTML. Для установки текста также следует использовать textContent, если не требуется разметка. Это безопаснее и быстрее, чем innerHTML.

const el = document.getElementById('example');
console.log(el.textContent);
el.textContent = 'Новый текст';

Dom js (dom в javascript)

Как вставить HTML-разметку внутрь элемента?

Свойство innerHTML позволяет получить или задать HTML-содержимое. При присвоении строка парсится и заменяет всё содержимое. Типичная ошибка: XSS-уязвимость при вставке непроверенных данных.

el.innerHTML = 'Важно';

Javascript document (объект document в javascript)

Проблема: потеря ссылок на DOM-объекты после замены innerHTML. Все обработчики событий на старых узлах удаляются. Решение: использовать методы создания узлов (createElement, appendChild).

Как получить только видимый текст с учётом CSS?

Свойство innerText возвращает отображаемый текст, учитывая стили (скрытые элементы игнорируются). Вызывает перерасчёт layout, поэтому медленнее textContent. Используется для копирования текста как видит пользователь.

console.log(element.innerText);

Js кнопка (создание и обработка кнопок в javascript)

Ошибка: innerText может не включать текст элементов с display:none. Если нужен весь текст (включая скрытый), используйте textContent.

Как заменить элемент вместе с его содержимым?

Свойство outerHTML возвращает HTML самого элемента и его потомков. При присвоении элемент в DOM заменяется новым узлом. Важно: переменная, ссылающаяся на старый элемент, остаётся ссылкой на удалённый узел.

el.outerHTML = 'Новый абзац
';

Javascript nodes (javascript nodes (узлы))

Типичная ошибка: после замены el больше не указывает на новый элемент. Необходимо обновить ссылку, например, через document.querySelector.

Как вставить HTML в определённое место без замены всего содержимого?

Метод insertAdjacentHTML принимает позицию (beforebegin, afterbegin, beforeend, afterend) и строку HTML. Не затрагивает существующие узлы.

el.insertAdjacentHTML('beforeend', 'Новый пункт
');

Javascript следующий (javascript: получение следующего элемента)

Проблемы: при использовании неправильной позиции возможна вставка в неожиданное место. Рекомендуется проверять совместимость с браузерами (поддерживается всеми современными).

Как безопасно добавить текст, избегая XSS?

Метод document.createTextNode создаёт текстовый узел, который не интерпретируется как HTML. Узел добавляется через appendChild или insertBefore.

const safe = document.createTextNode('');
el.appendChild(safe);

Ошибка: создание текстового узла неэкранирует уже существующий HTML в строке? createTextNode всегда создаёт текст, поэтому опасности нет.

- Javascript head (размещение скриптов в html)

- Js содержимое (содержимое элементов javascript)

Расширенные примеры работы с содержимым

Пример 1: Пакетная вставка с DocumentFragment

Пример

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const li = document.createElement('li');
    li.textContent = `Элемент ${i}`;
    fragment.appendChild(li);
}
list.appendChild(fragment);

Весь список добавляется одной операцией, уменьшая количество перерисовок.

Пример 2: Разница textContent и innerText

Пример

const div = document.createElement('div');
div.innerHTML = 'Видимый скрытый текст';
console.log('textContent:', div.textContent);
console.log('innerText:', div.innerText);

textContent: 'Видимый скрытый текст'
innerText: 'Видимый текст'

Пример 3: Экранирование HTML для безопасной вставки

Пример

function escapeHtml(str) {
    const div = document.createElement('div');
    div.appendChild(document.createTextNode(str));
    return div.innerHTML;
}
const userInput = '';
const safeHtml = escapeHtml(userInput);
el.innerHTML = safeHtml;

Вставленный код не выполнится, символы экранированы.

Пример 4: outerHTML и потеря ссылки

Пример

let el = document.querySelector('span');
console.log(el); // живой элемент
el.outerHTML = 'жирный';
console.log(el); // всё ещё ссылается на старый удалённый span

После outerHTML переменная el не обновляется.

Пример 5: insertAdjacentHTML с позицией afterend

Пример

const p = document.querySelector('p');
p.insertAdjacentHTML('afterend', '
');

После абзаца появляется горизонтальная линия.

Пример 6: Производительность textContent vs innerHTML

Пример

// Плохо: innerHTML разбирает строку заново
for (let i = 0; i < 1000; i++) {
    el.innerHTML = `Значение ${i}`;
}
// Хорошо: textContent только меняет текст
for (let i = 0; i < 1000; i++) {
    el.textContent = `Значение ${i}`;
}

Второй цикл выполняется быстрее, так как нет парсинга HTML.

Пример 7: Создание текстового узла через createTextNode

Пример

const div = document.createElement('div');
const text = document.createTextNode('Текст с HTML');
div.appendChild(text);
document.body.appendChild(div);

На странице отобразится строка 'Текст с HTML', жирного не будет.

Содержимое элементов JavaScript - comments

Js содержимое (javascript)