Як змінити вміст елемента?
Зміна вмісту елементів у DOM — це одне з найчастіших завдань під час розробки інтерактивних вебдодатків. JavaScript надає кілька різних властивостей для цієї мети, кожна з яких вирішує певні завдання та володіє своїми нюансами безпеки й продуктивності.
Найбільш безпечним і рекомендованим способом керування текстовим вмістом є властивість textContent. Вона встановлює або повертає текстовий вміст вузла та всіх його нащадків. Під час використання textContent увесь переданий текст сприймається саме як рядок, а не як HTML-код. Це означає, що якщо користувач спробує ввести шкідливий скрипт через поле введення, браузер просто відобразить його як текст, а не виконає. такий підхід повністю захищає додаток від XSS-атак (міжсайтового скриптингу), тому для роботи зі звичайним текстом завжди слід віддавати перевагу саме цій властивості.
З іншого боку, властивість innerHTML дозволяє не просто змінювати текст, а й впроваджувати повноцінну HTML-розмітку. З її допомогою можна динамічно створювати складні структури всередині елемента, додаючи нові теги, атрибути та вкладені блоки. однак головна проблема innerHTML полягає в його вразливості до XSS-атак. Якщо ви впроваджуєте в innerHTML дані, отримані від користувачів напряму та без попередньої суворої фільтрації, зловмисник може виконати довільний JavaScript-код у браузері інших користувачів. Тому застосовувати innerHTML варто лише з повністю довіреним статичним або попередньо санітизованим контентом.
Існує також властивість innerText, яка багато в чому схожа на textContent, але враховує стилі CSS і видимість елементів на сторінці. Наприклад, innerText не поверне текст прихованих за допомогою display: none елементів і враховує форматування. Однак його використання обходиться браузеру дорожче з погляду продуктивності, оскільки вимагає перерахунку макета сторінки.
У реальній розробці вибір зводиться до простого правила: для виведення звичайного тексту використовуйте textContent задля максимальної безпеки та швидкості, а для вставки готової розмітки використовуйте innerHTML, попередньо переконавшись у безпеці джерела даних.