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

Изменение содержимого элементов в DOM — это одна из наиболее частых задач при разработке интерактивных веб-приложений. JavaScript предоставляет несколько различных свойств для этой цели, каждое из которых решает определенные задачи и обладает своими нюансами безопасности и производительности.

Наиболее безопасным и рекомендуемым способом управления текстовым содержимым является свойство textContent. Оно устанавливает или возвращает текстовое содержимое узла и всех его потомков. При использовании textContent весь переданный текст воспринимается именно как строка, а не как HTML-код. Это означает, что если пользователь попытается ввести вредоносный скрипт через поле ввода, браузер просто отобразит его как текст, а не выполнит. Такой подход полностью защищает приложение от XSS-атак (межсайтового скриптинга), поэтому для работы с обычным текстом всегда следует предпочитать именно это свойство.

С другой стороны, свойство innerHTML позволяет не просто изменять текст, но и внедрять полноценную HTML-разметку. С его помощью можно динамически создавать сложные структуры внутри элемента, добавляя новые теги, атрибуты и вложенные блоки. Однако главная проблема innerHTML заключается в его уязвимости к XSS-атакам. Если вы внедряете в innerHTML данные, полученные от пользователей напрямую и без предварительной строгой фильтрации, злоумышленник может выполнить произвольный JavaScript-код в браузере других пользователей. Поэтому применять innerHTML стоит только с полностью доверенным статическим или предварительно санитизированным контентом.

Существует также свойство innerText, которое во многом похоже на textContent, но учитывает стили CSS и видимость элементов на странице. Например, innerText не вернет текст скрытых с помощью display: none элементов и учитывает форматирование. Однако его использование обходится браузеру дороже с точки зрения производительности, так как требует перерасчета макета страницы.

В реальной разработке выбор сводится к простому правилу: для вывода обычного текста используйте textContent для максимальной безопасности и скорости, а для вставки готовой разметки используйте innerHTML, предварительно убедившись в безопасности источника данных.