Мы нашли нужный элемент и вывели в консоль его текстовое содержимое. Но для нашей задачи это содержимое нужно изменить. Как это сделать? Присвоим свойству textContent новое значение.
Возьмём абзац с текстом:
Здесь могла быть ваша реклама.
И перезапишем его текстовое содержимое:
let paragraph = document.querySelector('p'); paragraph.textContent = 'Здесь был Кекс. Мяу!';
Обратите внимание, что строки с текстом нужно заключать в кавычки.
Когда инструкция выполнится, текст внутри абзаца изменится:
Здесь был Кекс. Мяу!
Когда мы присваиваем свойству textContent новое значение, оно полностью заменяет собой старое. Как и в случае с переключением классов, JavaScript не влияет на исходную разметку, а меняет текст прямо в браузере пользователя.
Свойство textContent предназначено только для текста, если записать туда HTML-теги, браузер их не поймёт.
Перейти к заданию
index.html Сплит-режим
style.css Сплит-режим
script.js Сплит-режим
FlashNews!
На главную
Новая библиотека для создания графиков
Теперь вы можете создать дашборд за считанные секунды.
Что там у роботов?
В робототехнике происходит много интересного, эта новость могла бы быть об этом, но нет.
JavaScript
let page = document.querySelector(‘.page’); let themeButton = document.querySelector(‘.theme-button’); themeButton.onclick = function() < page.classList.toggle('light-theme'); page.classList.toggle('dark-theme'); >; let message = document.querySelector(‘.subscription-message’);
Показать ответ
Спасибо! Мы скоро всё исправим)
Как изменить текст в html через js
Для изменения текстового значения элемента необходимо с помощью селектора выбрать его на странице, а потом в свойство textContent записать новое значение.
Исходный HTML документ
class="text">Здесь могла быть ваша рекламаonClick="changeText();">Нажми чтобы изменить
В раздел со скриптами на странице добавим определение функции:
const changeText=()=>// Выбираем элемент на странице, и меняем содержимое нужного поляdocument.getElementsByClassName('text')[0].textContent="Кто сказал мяу?";>
Как изменить текст в div через js
Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на другие языки.
Светлая тема Тёмная тема
Поделиться
Учебник
Браузер: документ, события, интерфейсы
Формы, элементы управления
Фокусировка: focus/blur
Редактируемый div
важность: 5
Создайте , который превращается в , если на него кликнуть.
позволяет редактировать HTML в элементе .
Когда пользователь нажимает Enter или переводит фокус, превращается обратно в , и его содержимое становится HTML-кодом в .
.text Content
Считываем и записываем текстовое содержимое элемента.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 26 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство text Content позволяет считывать или задавать текстовое содержимое элемента. Обращение к свойству вернёт строку, которая будет состоять из текстового содержимого всех вложенных элементов, даже если они скрыты с помощью CSS и не видны на экране.
Аналогичной функциональностью, но с некоторыми ограничениями обладает свойство inner Text . Оно работает так же, но не включает в себя скрытые элементы.
Обращение к свойству text Content тега весь текст внутри элемента:
const section = document.querySelector('section')console.log(section.textContent)// ЗаголовокИ параграф полезного текстаconst heading = document.querySelector('h1')heading.textContent = 'Новый заголовок'// В результате будет:
Новый заголовок
const section =document.querySelector('section')console.log(section.textContent)// ЗаголовокИ параграф полезного текстаconst heading =document.querySelector('h1') heading.textContent='Новый заголовок'// В результате будет:
Новый заголовок
Как понять
Скопировать ссылку «Как понять» Скопировано
Для считывания и изменения текстового содержимого браузер предоставляет свойства inner Text и text Content . Запись значения работает идентично для обоих. Значение, которое возвращается при чтении свойств отличается. text Content возвращает строку с содержимым всех вложенных потомков, вне зависимости от того, скрыты они или нет. inner Text же возвращает содержимое только видимых элементов.
Свойство может изменить только текстовое содержимое элемента, потому если присвоить строку, содержащую HTML, то она вставится как простой текст и не превратится в реальные DOM-элементы. Для того чтобы вставлять HTML c помощью строки подойдёт свойство inner H T M L .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Обращение к свойству text Content вернёт текстовое содержимое элемента. Если внутри элемента находятся дочерние узлы, то результат будет являться конкатенацией вызовов text Content для всех этих узлов.
const element = document.querySelector('div')console.log(element.textContent)// "ЗаголовокПараграфВторой параграф"// Так как слова не содержат пробелов, то и в итоговой строке между словами их тоже не будетconst element =document.querySelector('div')console.log(element.textContent)// "ЗаголовокПараграфВторой параграф"// Так как слова не содержат пробелов, то и в итоговой строке между словами их тоже не будет
Чтобы изменить текст в элементе нужно присвоить новое значение в свойство text Content .
Установка нового текста с помощью text Content полностью удалит всё старое содержимое и запишет новое текстовое значение. Если внутри элемента были другие вложенные потомки, то все они удалятся.
const element = document.querySelector('div')element.textContent = 'Я буду единственным текстом здесь'const element =document.querySelector('div') element.textContent='Я буду единственным текстом здесь'
Больше никакой иконки внутри, только новый текст:
Я буду единственным текстом здесьdiv> Я буду единственным текстом здесь div>