Подписка
Все курсы
РегистрацияВход
/
Вопросы и ответы
/
JavaScript
/

Как изменить текст в html через js

Как изменить текст в html через js

5 лет назад

Человек-Молекула

Ответы

0

Для изменения текстового значения элемента необходимо с помощью селектора выбрать его на странице, а потом в свойство textContent записать новое значение.

Рассмотрим пример:

Исходный HTML документ

1
2
3
4
<body>
    <p class="text">Здесь могла быть ваша реклама</p>
    <button onClick="changeText();">Нажми чтобы изменить</button>
</body>

В раздел со скриптами на странице добавим определение функции:

1
2
3
4
const changeText = () => {
  // Выбираем элемент на странице, и меняем содержимое нужного поля
  document.getElementsByClassName('text')[0].textContent = "Кто сказал мяу?";
}

4 года назад

Вячеслав Межуревский

0

Найдите элемент и запишите новый текст в свойство textContent:

1
2
3
4
5
6
<p id="status">Загрузка...</p>

<script>
  const status = document.getElementById('status');
  status.textContent = 'Готово';
</script>

textContent вставляет текст как есть: теги внутри строки покажутся на странице символами и не выполнятся. Это безопасно для данных от пользователя.

Вставить HTML

Если нужен текст с разметкой, используйте innerHTML:

1
status.innerHTML = 'Готово: <strong>3 файла</strong>';

Не передавайте в innerHTML то, что ввёл пользователь: так на страницу можно внедрить чужой скрипт (XSS).

Изменить текст нескольких элементов

1
2
3
document.querySelectorAll('.price').forEach((el) => {
  el.textContent = '990 ₽';
});

Изменить текст по клику

1
2
3
4
5
6
7
8
<button id="toggle">Показать</button>

<script>
  const button = document.getElementById('toggle');
  button.addEventListener('click', () => {
    button.textContent = button.textContent === 'Показать' ? 'Скрыть' : 'Показать';
  });
</script>

Чем отличаются свойства

СвойствоЧто делает
textContentТекст элемента и всех вложенных, без тегов
innerTextВидимый текст с учётом CSS: скрытые элементы не попадут
innerHTMLРазметка внутри элемента, теги выполняются
valueТекст в полях input и textarea

Для полей ввода textContent не работает, у них текст меняют через value.

Работу с DOM разбирают в бесплатном курсе «Основы JavaScript».

9 дней назад

Никита Вихров

Похожие вопросы

Хекслет

О насОтзывыСправкаБлогВопросы и ответыГлоссарийКарта сайта

Направления

ПрограммированиеИИАналитикаDevOpsТестированиеФронтендБэкенд

Профессии

ИИ для разработчиковPython-разработчикФронтенд-разработчикJava-разработчикИнженер по ручному тестированиюDevOps-инженер с нуляPHP-разработчикGo-разработчикАналитик данныхAI-автоматизацияИнженерия агентовAI SDLC

Навыки

Spring BootDockerTypescriptLaravelDjangoReactВеб-разработка на ExpressPostmanREST API в Node.js

support@hexlet.io

t.me/hexlet_help_bot

RU

ENKZ
+7 800 100 22 47

бесплатно по РФ

+7 495 085 21 62

бесплатно по Москве

Правовая информацияОфертаЛицензияКонтакты
108813 г. Москва, вн.тер.г. поселение Московский,
г. Московский, ул. Солнечная, д. 3А, стр. 1, помещ. 20Б/3
ОГРН 1217300010476
ИНН 7325174845