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

Как добавить текст в html через js

  • автор:

Как добавить текст через js в html

Мне нужно в пустой элемент p с классом country вставить текст через js. Такой код почему то не работает:

 var elem = document.getElementsByClassName('country'); elem.innerHTML = "USA"; document.body.appendChild(elem); 

И такой тоже

var elem = document.getElementsByClassName('country'); var textElem = document.createTextNode('USA'); elem.appendChild(textElem); 

Отслеживать
задан 26 окт 2018 в 23:17
887 1 1 золотой знак 9 9 серебряных знаков 15 15 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Посмотрите тут. Метод getElementsByClassName возвращает как видно из названия (elements — множественное число) array-like объект, а не конкретный элемент DOM.

Как получаем доступ к элементу массива?

var elem = document.getElementsByClassName('country'); elem[0].innerHTML = "USA" 

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

Для изменения текстового значения элемента необходимо с помощью селектора выбрать его на странице, а потом в свойство textContent записать новое значение.

Исходный HTML документ

  class="text">Здесь могла быть ваша реклама  onClick="changeText();">Нажми чтобы изменить  

В раздел со скриптами на странице добавим определение функции:

const changeText = () =>  // Выбираем элемент на странице, и меняем содержимое нужного поля document.getElementsByClassName('text')[0].textContent = "Кто сказал мяу?"; > 

Курсы javascript

Я новичек, подскажите, как я могу добавить текст на страницу? Например: мне между тегами нужно вставить дату, которую вернет объект Date. Да и вообще любой текст..

23.01.2013, 23:08
Регистрация: 11.09.2010
Сообщений: 8,804

  

24.01.2013, 02:27
Новичок на форуме
Регистрация: 23.01.2013
Сообщений: 8

Спасибо! А подскажите еще, добавить текст в тег с классом?

Так вот не работает

24.01.2013, 03:00
Регистрация: 11.09.2010
Сообщений: 8,804

 

.inner Text

Читаем весь текст во вложенных элементах или записываем свой.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 16 апреля 2024

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство inner Text позволяет считывать или задавать текстовое содержимое элемента. При считывании текста с элемента, возвращается строка с текстовым содержимым всех вложенных дочерних элементов. Не будет считываться только содержимое скрытых с помощью CSS элементов, а также содержимое тегов и .

Аналогичной функциональностью обладает свойство text Content , но оно возвращает содержимое всех дочерних элементов, даже скрытых:

Пример

Скопировать ссылку «Пример» Скопировано

       form> label for='name'>Имяlabel> input type="text" id="name"> button type="submit" id="submit">Submitbutton> form>      
 const form = document.querySelector('form')const button = document.getElementById('submit') console.log(form.innerText)// "ИмяSubmit" button.innerText = 'Done!'console.log(button)//  const form = document.querySelector('form') const button = document.getElementById('submit') console.log(form.innerText) // "ИмяSubmit" button.innerText = 'Done!' console.log(button) //       

Как понять

Скопировать ссылку «Как понять» Скопировано

Считывание и изменение текстового содержимого – довольно распространённая задача. inner Text позволяет считывать содержимое элемента и его потомков, но с несколькими исключениями:

  • не считывается содержимое тегов и ;
  • не считывается содержимое скрытых элементов.

Свойство может изменять только текстовое содержимое элемента. Если попытаться присвоить строку с HTML, она вставится как текст и не превратится в реальные DOM-элементы. Чтобы HTML в строке сработал, используйте inner H T M L .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Свойство inner Text работает и как геттер, и как сеттер — обращение к свойству вернёт текстовое содержимое элементов и его потомков, а установка нового значения изменит все текстовое содержимое элемента.

Например, мы хотим изменить текст в блоке после окончания загрузки:

   Loading.  div id="loading-status"> Loading. div>      
 const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Data loaded!' const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Data loaded!'      

В результате в браузере будет отображаться следующий HTML:

   Data loaded!  div id="loading-status"> Data loaded! div>      

Установка нового текста с помощью inner Text полностью удалит все старое содержимое и запишет новое текстовое значение. Если внутри элемента были другие вложенные потомки, то все они удалятся.

Предположим, что в блоке статуса загрузки был ещё элемент отображающий иконку-лоадер.

   Loading.  div id="loading-status"> div class="fancy-loader">div> Loading. div>      

Установка нового значения в inner Text полностью удалит все предыдущее содержимое и перезапишет его новым текстом.

 const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Error occurred!' const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Error occurred!'      

После выполнения кода, внутри блока останется только текст:

   Error occurred!  div id="loading-status"> Error occurred! div>      

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

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