Как поменять текст элемента через JavaScript — textContent или innerHTML?
Хочу из JS изменить надпись внутри <div> или <span>. Нашёл textContent и innerHTML. В чём разница и что использовать, если нужен просто текст?
4 ответа
Для обычного текста — textContent. Он вставляет строку как есть, без разбора HTML:
const el = document.querySelector('#title');
el.textContent = 'Новый текст';
innerHTML парсит строку как HTML: el.innerHTML = '<b>Привет</b>' вставит жирный текст. Но в этом и опасность — если в строку попадут данные от пользователя, через innerHTML можно словить XSS-уязвимость (вставят <script> или картинку с onerror). Поэтому правило: меняешь просто текст → textContent; нужно именно вставить разметку и ты контролируешь её источник → innerHTML.
Просто текст — textContent. Нужна разметка внутри — innerHTML (но осторожно с пользовательскими данными).
Есть ещё innerText — он, в отличие от textContent, учитывает CSS (не вернёт скрытый через display:none текст) и заставляет браузер пересчитать стили, поэтому медленнее. Для простой подстановки текста бери textContent.
element.textContent = '...'.
