Как изменить текст в div через js
Перейти к содержимому

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

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

Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на другие языки.

Светлая тема Тёмная тема
Поделиться

  • Учебник
  • Браузер: документ, события, интерфейсы
  • Формы, элементы управления
  • Фокусировка: focus/blur

Редактируемый div

важность: 5

Создайте , который превращается в , если на него кликнуть.

позволяет редактировать HTML в элементе .

Когда пользователь нажимает Enter или переводит фокус, превращается обратно в , и его содержимое становится HTML-кодом в .

.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 ссылка

Есть идеи, как это можно сделать?

  • Вопрос задан более года назад
  • 2361 просмотр

Меняем текстовое содержимое элемента

Мы нашли нужный элемент и вывели в консоль его текстовое содержимое. Но для нашей задачи это содержимое нужно изменить. Как это сделать? Присвоим свойству textContent новое значение.

Возьмём абзац с текстом:

Здесь могла быть ваша реклама.

И перезапишем его текстовое содержимое:

let paragraph = document.querySelector('p'); paragraph.textContent = 'Здесь был Кекс. Мяу!';

Обратите внимание, что строки с текстом нужно заключать в кавычки.

Когда инструкция выполнится, текст внутри абзаца изменится:

Здесь был Кекс. Мяу!

Когда мы присваиваем свойству textContent новое значение, оно полностью заменяет собой старое. Как и в случае с переключением классов, JavaScript не влияет на исходную разметку, а меняет текст прямо в браузере пользователя.

Свойство textContent предназначено только для текста, если записать туда HTML-теги, браузер их не поймёт.

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим
  • script.js Сплит-режим

FlashNews!

На главную

email

Новая библиотека для создания графиков

Теперь вы можете создать дашборд за считанные секунды.

Что там у роботов?

В робототехнике происходит много интересного, эта новость могла бы быть об этом, но нет.


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’);

Показать ответ

Спасибо! Мы скоро всё исправим)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *