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

Отслеживать
ответ дан 13 окт 2015 в 11:16
16.6k 8 8 золотых знаков 26 26 серебряных знаков 56 56 бронзовых знаков
@DmitriySimushev, ну что, все еще не работает?
13 окт 2015 в 11:16

Работает, хотя я бы еще > заменил. Вопрос только в том, а стоит ли использовать все эти замены ради применения innerHTML ? 😉

13 окт 2015 в 11:36

• javascript
• html

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.21.1314

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как изменить текст в 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
• Курсы «Веб-разработка»
• Курсы «Математика для программистов»
• Все курсы

О Хекслете

• О нас
• Карьера в Хекслете
• Хекслет Колледж
• Сведения об образовательной организации
• Лицензия № Л035-01216-73/00668844

ООО «Акцент» 432042, Ульяновская область, г. Ульяновск, ул. Александра Невского д.2 «б», кор. 4, кв 45 ОГРН 1187325016878

• Справка
• Вопросы и ответы
• Сообщество
• Дополнительно

• Условия использования
• Соглашение об обработке ПД
• Оферта
• Акции

Вставка текста и html-кода в элементы страницы - Методы innerHTML, textContent и insertAdjacentHTML

Если Вы научились манипулировать положением элементов на странице (см. заметки "Действия с элементами - . "), то дальше нужно знать, как добавить текст или HTML-код непосредственно в элементы?

Работая с примером 2.1 из прошлой статьи, мы имели дело с простым элементом , у которого есть оболочка - это тег div и какое-то оформление - это класс black . Больше ничего этот элемент не содержит.

Здесь мы продолжим работать с тегом div - будем его редактировать. Допустим нам нужно вписать в него какой-то текст. Как это сделать?

Для этого существует два метода: innerHTML и textContent. А также метод insertAdjacentHTML, который позволяет вставить текст или код в любое место страницы .

Метод innerHTML - Вставка текста

Метод innerHTML позволяет вставить текст.

'use strict'; // Создаем новый элемент с указанным именем тега const div = document.createElement("div"); // Добавляем к div класс black div.classList.add('black'); // Добавляем в конец body тег div document.body.append(div); // Вставка текста в тег div div.innerHTML = "Hello world"; 

Результат в Браузере

В тег div добавили текст Hello world .

Метод innerHTML - Вставка HTML-кода

Метод innerHTML позволяет вставить HTML-код.

Продолжим работать с предыдущим примером.

'use strict'; const div = document.createElement("div"); div.classList.add('black'); document.body.append(div); // Вставка кода div.innerHTML = "
Hello world
"; 

Результат в Браузере

Текст Hello world заключили в заголовок h1 ("Hello world" теперь не умещается в область тега div) .

Метод textContent - Вставка текста

Метод textContent позволяет вставить текст.

'use strict'; const div = document.createElement("div"); div.classList.add('black'); document.body.append(div); // Вставка текста в тег div div.textContent = "textContent"; 

Результат в Браузере

В отличии от метода innerHTML - метод textContent работает только с текстом .

Если при помощи метода textContent пробовать вставить код, то он будет преобразован в строку.

Метод insertAdjacentHTML

Напоследок ответим на вопрос, как вставить HTML-код перед или после определенных тегов? Для этого существует метод insertAdjacentHTML.

Метод insertAdjacentHTML позволяет вставить HTML-код в любое место страницы.

Синтаксис метода insertAdjacentHTML

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

опорный элемент.insertAdjacentHTML( "ключевое слово" , "код" );

Метод insertAdjacentHTML принимает два аргумента : первый - это одно из ключевых слов: afterbegin, afterend, beforebegin или beforeend. Второй аргумент метода insertAdjacentHTML - это HTML-код, который мы хотим вставить.

'use strict'; // Создаем новый элемент с указанным именем тега const div = document.createElement("div"); // Добавляем к div класс black div.classList.add('black'); // Добавляем к div стили div.style.cssText = 'width: 250px; height: 110px'; // Добавляем в конец body тег div document.body.append(div); // Вставка HTML-кода в начало и в конец элемента div.insertAdjacentHTML("afterbegin", '
afterbegin - В начало элемента
'); div.insertAdjacentHTML("beforeend", '
beforeend - В конец элемента
'); // Вставка HTML-кода после и перед элементом div.insertAdjacentHTML("afterend", '
afterend - После элемента
'); div.insertAdjacentHTML("beforebegin", '
beforebegin - Перед элементом
'); 

Результат в Браузере

Результат в консоли

beforebegin - Перед элементом
 
afterbegin - В начало элемента
 
beforeend - В конец элемента
 
 
afterend - После элемента
 

Вот так при помощи метода insertAdjacentHTML происходит вставка HTML-кода в любое место страницы относительно опорного элемента.

Как добавить текст в div

Приереплю скриншот. В чёрном квадрате должен отображаться текст, но ,как Вы видите, никакого текста нет. Пробовал и через .html вместо .text, и через .append, и задавал переменной текст и после добавлял через переменную и ничего не менялось. Что не так? Как исправить?

1 2 3

div id="About"> /div>

1 2 3 4 5 6 7 8 9 10 11

#About { width: 1280px; height: auto; padding: 20px; border: 5px solid black; margin-left: calc(50% - 660px); margin-top: 20px; } #About div { overflow-x:hidden; }

1 2 3 4 5 6 7

$(function(){ $("#About").text("
Наименование: .
  
. Много текста.
  
Стоимость: 1 900 рублей
"); })

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Вытащить текст из DIV и добавить к нему класс
Доброго времени уважаемые форумчане ! Подскажите как вытащить текст их div блока, задать ему.

Как растянуть основной div до футера и разместить текст ровно центру этого div?
Всем привет, решил попробовать создать простейший резиновый сайт и чтобы футер был привязан внизу.

Текст и div. Сделать текст поверх div`a
Написать текст внутри div`a, у которого ширина равна 2px. То есть текст должен стоять поверх этого.

2034 / 1093 / 408
Регистрация: 29.04.2016
Сообщений: 2,612

Сообщение было отмечено triatri3 как решение

Решение

1 2 3

div id="About">/div> div id="About2">/div> div id="About3">/div>

1 2 3 4 5 6 7 8 9 10 11 12

// Либо так $("#About").html("
Наименование: .
 " + "
. Много текста.
 " + "
Стоимость: 1 900 рублей
"); // Либо так $("#About2").html(`p>Наименование: . p> p>. Много текста. p> p>Стоимость: 1 900 рублейp>`); // Либо так $("#About3").html("
Наименование: .
 
. Много текста.
 
Стоимость: 1 900 рублей
");

Добавлено через 3 минуты
Если больше нравится 2-ой вариант, то если нужно внутри использовать переменную то так -> https://codepen.io/Mr_Sergo/pe. itors=1010

1 2 3 4 5

let variable = '1 900'; $("#About2").html(`p>Наименование: . p> p>. Много текста. p> p>Стоимость: ${variable} рублейp>`);