Javascript get text in div

Node.textContent

Позволяет задавать или получать текстовое содержимое элемента и его потомков.

Синтаксис

var text = element.textContent; element.textContent = "Это просто текст";

Описание

• textContent возвращает null, если узел является документом (en-US), типом документа, или его описанием. Для получения всего текста и CDATA-данных во всём документе можно использовать document.documentElement.textContent .
• Если узел является CDATA, комментарием, инструкцией, или текстовым элементом, textContent возвращает текст внутри узла в виде строки (т.н. nodeValue (en-US)).
• Для узлов других типов textContent возвращает конкатенацию свойств textContent всех дочерних узлов, исключая комментарии и строки кода. Если узел не имеет дочерних узлов, будет возвращена пустая строка.
• Установка данного значения удаляет все дочерние узлы и заменяет их единичным текстовым узлом с указанным значением.

Отличие от innerText

element.innerText был введён Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:

Отличие от innerHTML

innerHTML , как можно понять из его названия, возвращает HTML. Довольно часто innerHTML используется для получения или записи текста в элемент. Тем не менее, вместо него желательно использовать textContent : этот метод потребляет гораздо меньше ресурсов, так как текст парсится как текст, а не HTML. Кроме того, это защищает от XSS атак.

Пример

// Дан следующий фрагмент: // 
Это — просто текст // Достаём текстовое содержимое: var text = document.getElementById("block").textContent; // В переменной |text| находится: "Это — просто текст". // Меняем текст: document.getElementById("block").textContent = "Это — просто текст"; // Теперь наш фрагмент выглядит так: // 
Это — просто текст 

Поддержка браузерами

BCD tables only load in the browser

Спецификация

Смотрите также

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

How To Get The Text Of A Div Element Using JavaScript

When working with Javascript, it is very common to get the content inside an HTML tag, and sometimes you also need to assign content to HTML tags to create messages for users. Here are some ways to help you get the text of a Div element using Javascript.

Get the text of a Div element using Javascript.

Using getElementById with innerText, innerHTML or textContent

GetElementById in Javascript is a method of DOM object, which works to get an element from the DOM through the value of that element’s id attribute.

The syntax to use the getElementById method in Javascript is as follows:

The getElementById method will return the Element Object if an element with the specified id is found and will return null if no matching element is found.

Code HTML sample

To get the text inside a Div element using Javascript, we can use one of the following syntaxes.

let text = document.getElementById("id1"); // get the html content inside a Div element console.log(text.innerHTML); // get the text content inside an Div element console.log(text.textContent); // get the text inside a Div element console.log(text.innerText);

Hello guys, welcome to LearnshareIT Hello guys, welcome to LearnshareIT Hello guys,

Difference between innerText, innerHTML, textContent in Javascript

As the results of the above example, different methods give different results. So the difference between innerText, innerHTML, textContent is:

• innerHTML: will print out the text and the tags in this div.
• textContent: will print the text content and the content of the tags inside this div. It gives you everything, both visible and hidden.
• innerText: will print out the text content, trim spaces between lines, and add line breaks between items.

In the above example, innerText is not displaying the content of the hidden tag (because the span has display: none, this is used to hide this span tag).

Summary

Above, I showed you how to get the text of a Div element using Javascript by the getElementById property and innerText , innerHTML , or textContent . I hope they are helpful to you. To better understand the lesson’s content, practice rewriting today’s examples. And let’s learn more about Javascript in the next lessons here. Have a great day!

Maybe you are interested:

Hi, my name is Joni Smith. My job is a programmer. I love learning programming languages, especially C++, C#, php, javascript, html, css. I want to share them with you. I hope my articles will bring a lot of useful knowledge to you.

Name of the university: HVNH BA
Major: htttql MIS
Programming Languages: C++, C#, php, javascript, html, css

Источник

.text Content

Считываем и записываем текстовое содержимое элемента.

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

Кратко

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

Свойство 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>    Скопировать Скопировано Не удалось скопировать   

Источник