Как изменить текст элемента в JavaScript — textContent или innerHTML?
Достал <span> через querySelector, теперь хочу поменять текст внутри. Нашёл textContent, innerText и innerHTML — три разных свойства, и непонятно, чем менять текст элемента и в чём подвох.
2 ответа
Для обычного текста бери textContent — это просто и безопасно.
const el = document.querySelector('#title');
el.textContent = 'Новый заголовок';
Разница между тремя свойствами:
textContent — читает/пишет чистый текст. HTML-теги внутри строки НЕ выполнятся, вставятся как текст. Быстрый и безопасный:
el.textContent = '<b>жирный</b>';
// на странице увидишь буквально: <b>жирный</b>
innerHTML — парсит строку как HTML. Удобно, когда реально нужна разметка:
el.innerHTML = '<b>жирный</b>';
// на странице увидишь жирное слово
innerText — похож на textContent, но учитывает видимость (CSS) и стоит дороже по производительности. Нужен редко.
Главный подвох — безопасность. Никогда не клади данные от пользователя в innerHTML — это дыра XSS (можно внедрить чужой скрипт):
// ОПАСНО, если userInput пришёл от пользователя
el.innerHTML = userInput;
// БЕЗОПАСНО — теги не выполнятся
el.textContent = userInput;
Правило: меняешь просто текст → textContent. Нужна разметка из доверенного источника → innerHTML. Данные от юзера → только textContent.
Маленький, но частый баг: путают textContent (свойство DOM) с попыткой задать текст через value.
value — это для полей ввода (input, textarea):
document.querySelector('input').value = 'текст в поле';
А для обычных элементов (div, span, p) текст задаётся через textContent, не value. Перепутаешь — ничего не отобразится.