Как изменить текст в div через js
Для изменения текста внутри элемента можно использовать свойство textContent:
03 марта 2023
Основы Frontend за 14 дней
72 урока в онлайн-тренажере
4 живых вебинара и масскодинг
Помощь наставника на весь период обучения
Есть что добавить? Зарегистрируйтесь
Курсы по программированию в Хекслете
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
- Курсы «Веб-разработка»
- Курсы «Математика для программистов»
- Все курсы
О Хекслете
- О нас
- Карьера в Хекслете
- Хекслет Колледж
ООО «Хекслет Рус» 108813, г. Москва, вн.тер.г. поселение Московский, г. Московский, ул. Солнечная, д. 3А, стр. 1, помещ. 10/3 ОГРН 1217300010476
- Справка
- Вопросы и ответы
- Сообщество
- Дополнительно
- Условия использования
- Соглашение об обработке ПД
- Оферта
- Акции
Как изменить текст в div через js
Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на другие языки.
Светлая тема Тёмная тема
Поделиться
- Учебник
- Браузер: документ, события, интерфейсы
- Формы, элементы управления
- Фокусировка: focus/blur
Редактируемый div
важность: 5
Создайте , который превращается в , если на него кликнуть.
позволяет редактировать HTML в элементе .
Когда пользователь нажимает Enter или переводит фокус, превращается обратно в , и его содержимое становится HTML-кодом в .
.text Content
Считываем и записываем текстовое содержимое элемента.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 18 апреля 2024
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство 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 с дочерними элементами через jQuery
Чтобы изменить текст элемента, не влияя на вложенные элементы, нужно найти первый текстовый узел следующим образом:
Скопировать код
let parent = document.querySelector('#parent'); // Тут указывается целевой элемент let textNode = Array.from(parent.childNodes).find(n => n.nodeType === 3); // Поиск первого текстового узла if (textNode) textNode.nodeValue = 'Новый текст'; // Обновление его текстового содержимогоВ этом примере мы обращаемся к элементу с идентификатором #parent , выбираем первый текстовый узел ( nodeType == 3 ), а затем изменяем его значение nodeValue .
Сохранение иерархии родитель-дети: JavaScript подход
Если вам нужно обновить текстовый контент «родительского» элемента, оставляя при этом дочерние элементы без изменений, делается это так:
Скопировать код
let parent = document.querySelector('#parent'); // Элемент-родитель let children = [. parent.childNodes].filter(n => n.nodeType !== 3); // Выделение дочерних элементов // Временное удаление дочерних узлов while (parent.firstChild) < parent.removeChild(parent.firstChild); >// Обновление текста parent.appendChild(document.createTextNode('Новый текст')); // Возвращение дочерних узлов на их место children.forEach(child => < parent.appendChild(child); >);В данном примере сначала осуществляется временное удаление дочерних элементов, затем происходит замена текста, после чего дочерние элементы возвращаются обратно.
Изоляция текстового узла: хитрости jQuery
Замена всех текстовых узлов
Для замены всех текстовых узлов в jQuery сочетание .contents() и .filter() будут вам в помощь: