Как изменить текст в div через js
Для изменения текста внутри элемента можно использовать свойство textContent:
03 марта 2023
Есть что добавить? Зарегистрируйтесь
Курсы по программированию на Хекслете
Backend-разработка
Разработка серверной части сайтов и веб-приложений
Frontend-разработка
Разработка внешнего интерфейса сайтов и веб-приложений и верстка
Создание сайтов
Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails
Тестирование
Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP
Аналитика данных
Сбор, анализ и интерпретация данных на Python
Интенсивные курсы
Интенсивное обучение для продолжающих
DevOps
Автоматизация настройки локального окружения и серверов, развертывания и деплоя
Веб-разработка
Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков
Математика для программистов
Обучение разделам математики, которые будут полезны при изучении программирования
JavaScript
Разработка сайтов и веб-приложений и автоматизированное тестирование на JS
Python
Веб-разработка, автоматическое тестирование и аналитика данных на Python
Java
Веб-разработка и автоматическое тестирование на Java
PHP
Веб-разработка и автоматическое тестирование на PHP
Ruby
Разработка сайтов и веб-приложений на Ruby on Rails
Go
Курсы по веб-разработке на языке Go
HTML
Современная верстка с помощью HTML и CSS
SQL
Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД
Git
Система управления версиями Git, регулярные выражения и основы командой строки
Похожие вопросы
07 апреля 2023
20 декабря 2021
14 октября 2021
20 декабря 2021
- 8 800 100 22 47 бесплатно по РФ
- +7 495 085 28 38 бесплатно по Москве
Направления
- Курсы «Backend-разработка»
- Курсы «Frontend-разработка»
- Курсы «Создание сайтов»
- Курсы «Тестирование»
- Курсы «Аналитика данных»
- Интенсивные курсы
- Курсы DevOps
- Курсы «Веб-разработка»
- Курсы «Математика для программистов»
- Все курсы
О Хекслете
- О нас
- Карьера в Хекслете
- Хекслет Колледж
ООО «Хекслет Рус» 432071, г. Ульяновск, пр-т Нариманова, дом 1Г, оф. 23 ОГРН 1217300010476
- Справка
- Вопросы и ответы
- Сообщество
- Дополнительно
- Условия использования
- Соглашение об обработке ПД
- Оферта
- Акции
Как изменить текст в html через js
Для изменения текстового значения элемента необходимо с помощью селектора выбрать его на странице, а потом в свойство textContent записать новое значение.
Исходный HTML документ
class="text">Здесь могла быть ваша реклама onClick="changeText();">Нажми чтобы изменить
В раздел со скриптами на странице добавим определение функции:
const changeText = () => // Выбираем элемент на странице, и меняем содержимое нужного поля document.getElementsByClassName('text')[0].textContent = "Кто сказал мяу?"; > .text Content
Считываем и записываем текстовое содержимое элемента.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 26 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство text Content позволяет считывать или задавать текстовое содержимое элемента. Обращение к свойству вернёт строку, которая будет состоять из текстового содержимого всех вложенных элементов, даже если они скрыты с помощью CSS и не видны на экране.
Аналогичной функциональностью, но с некоторыми ограничениями обладает свойство inner Text . Оно работает так же, но не включает в себя скрытые элементы.
Пример
Скопировать ссылку «Пример» Скопировано
Заголовок
И параграф полезного текста
section> h1>Заголовокh1> p>И параграф полезного текстаp> section>
Обращение к свойству 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 для всех этих узлов.
Заголовок
Параграф
Второй параграф
div> h1>Заголовокh1> p>Параграфp> p>Второй параграфp> div>
const element = document.querySelector('div') console.log(element.textContent)// "ЗаголовокПараграфВторой параграф"// Так как слова не содержат пробелов, то и в итоговой строке между словами их тоже не будетconst element = document.querySelector('div') console.log(element.textContent) // "ЗаголовокПараграфВторой параграф" // Так как слова не содержат пробелов, то и в итоговой строке между словами их тоже не будет
Чтобы изменить текст в элементе нужно присвоить новое значение в свойство text Content .
Установка нового текста с помощью text Content полностью удалит всё старое содержимое и запишет новое текстовое значение. Если внутри элемента были другие вложенные потомки, то все они удалятся.
Заголовок
Параграф
Второй параграф
div> h1>Заголовокh1> p>Параграфp> p>Второй параграфp> div>
const element = document.querySelector('div')element.textContent = 'Я буду единственным текстом здесь'const element = document.querySelector('div') element.textContent = 'Я буду единственным текстом здесь'
Больше никакой иконки внутри, только новый текст:
Я буду единственным текстом здесьdiv> Я буду единственным текстом здесь div>
Как изменять текст в блоке div через Javascript?
Здравствуйте. Нужно реализовать так, чтобы в блоке div можно было динамически изменять текст. Например, пользователю задают вопрос, и он в этом же div пишет текст, и он заменяет старый. Нашел подобный готовый код, но нужно сделать не таблицей, а вывести либо отдельную форму для ввода текста либо в этом же div писать новый текст.
JS Change tag inner Text #text Модель Стоимость Samsung Galaxy S10 $1000.00 Apple 7 plus $980.50 Huawei P20 Pro $750.99
function TagContentChanger(selector,onBlurCallback) < let elements = document.querySelectorAll(selector); function process(element,callback) < let bg = element.style.background; element.addEventListener('click', (event) =>< element.setAttribute('contenteditable',true); element.style.background = "rgb(113, 179, 240)"; >); element.addEventListener('blur', (event) => < if( element.hasAttribute('contenteditable') ) < element.removeAttribute('contenteditable',false); element.style.background = bg; callback(element); >>); > for(let element of elements) < process(element,onBlurCallback); >> function fillEditables(selector) < let elements = document.querySelectorAll(selector); for(let element of elements) < let value = localStorage.getItem(element.dataset.name); if( !value ) return; else element.innerText = value.trim(); >> fillEditables('.editable'); TagContentChanger('.editable', (element) => < localStorage.setItem(element.dataset.name,element.innerText); >);Так же на codepen ссылка
Есть идеи, как это можно сделать?
- Вопрос задан более года назад
- 2511 просмотров