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

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

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

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

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

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

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

Как добавить текст через 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" 

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

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

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

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

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

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

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

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

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

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

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

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

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