Как изменить текст в div через js
Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на другие языки.
Светлая тема Тёмная тема
Поделиться
- Учебник
- Браузер: документ, события, интерфейсы
- Формы, элементы управления
- Фокусировка: focus/blur
Редактируемый div
важность: 5
Создайте , который превращается в , если на него кликнуть.
позволяет редактировать HTML в элементе .
Когда пользователь нажимает Enter или переводит фокус, превращается обратно в , и его содержимое становится HTML-кодом в .
Как изменить текст в 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
- Справка
- Вопросы и ответы
- Сообщество
- Дополнительно
- Условия использования
- Соглашение об обработке ПД
- Оферта
- Акции
Как изменять текст в блоке 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 ссылка
Есть идеи, как это можно сделать?
- Вопрос задан более года назад
- 2460 просмотров
Заменить текст с помощью JS
Старался следовать условиям вопроса буквально. Так-то конечно незачем, потому что все пробельные символы будут нормализованы.
12 июл 2020 в 18:59
@vsemozhetbyt спасибо, но не совсем то. Наверное моя вина, что не конкретизировал. Нужно заменить конкретно «Первое слово» на «Второе слово». В этом блоке может быть и «Третье слово», но его трогать не нужно) Как быть?
12 июл 2020 в 19:04
Тогда можно, как в последней редакции ответа.
12 июл 2020 в 19:57
К сожалению, я не знаю PHP и как его код взаимодействует с JS, так что, наверное, вам лучше задать новый вопрос с соответствующими тегами и подробным описанием)
12 июл 2020 в 20:58
document.querySelector('.block').onmousemove = function() < setTimeout( () =>< document.querySelector('.block').innerHTML = 'Второе слово'; >, 300) >Первое словоОтслеживать
ответ дан 12 июл 2020 в 20:36
2,358 1 1 золотой знак 12 12 серебряных знаков 34 34 бронзовых знака
- javascript
- html
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.