JavaScript | Чем отличается innerText от innerHTML?

 

На первых порах изучения JavaScript бывают непонятны отличительные черты некоторых свойств объектов. Например, в инструментах разработчика не всегда можно понять разницу между innerText и innerHTML. Такое бывает из-за одинакового строкового содержимого в этих свойствах у элемента.

 

Так в чём же различие?

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

innerHTML — покажет текстовую информацию ровно по одному элементу. В вывод попадёт и текст и разметка HTML-документа, которая может быть заключена между открывающими и закрывающими тегами основного элемента.

 

Видео

 

Примеры

У нас есть ненумерованный список бытовой техники с ценами. Информация оформлена в виде форматированного текста. Цена выделена жирным шрифтом. Внутри круглых скобок курсивом прописано полное название валюты, цвет текста — красный.

Так выглядит HTML-код списка:

<ul>
   <li>Холодильник - <span><b>52000</b> руб. <i style="color: red">(рублей)</i></span></li>
   <li>Телевизор - <span><b>41000</b> руб. <i style="color: red">(рублей)</i></span></li>
   <li>Стиральная машина - <span><b>37000</b> руб. <i style="color: red">(рублей)</i></span></li>
   <li>Плита - <span><b>26000</b> руб. <i style="color: red">(рублей)</i></span></li>
</ul>

Давайте теперь посмотрим на различия в выводе innerText и innerHTML. Как мы будем это делать? Все операции будем писать напрямую в консоль браузера.

1. Для начала получим список всех элементов <li>. (HTMLCollection — коллекция HTML)

var spisok = document.getElementsByTagName("li")

2. Потом будем обращаться к элементам HTML коллекции (в нашем случае объектам HTMLCollection) и выводить у них свойства innerText и innerHTML

innerText

spisok[0].innerText
   // "Холодильник - 52000 руб. (рублей)"
spisok[1].innerText
   // "Телевизор - 41000 руб. (рублей)"

На выходе мы получаем строковый тип данных без первоначального форматирования. То есть «голый» текст, который заключён внутри элементов <li>. Из всех дочерних элементов были извлечены текстовые значения. Всё, что доставалось конкатенировалось (складывалось) в одну строку. Визуально очень понятно о чём идёт речь.

 

innerHTML

spisok[0].innerHTML
   // "Холодильник - <span><b>52000</b> руб. <i style="color: red">(рублей)</i></span>"
spisok[1].innerHTML
   // "Телевизор - <span><b>41000</b> руб. <i style="color: red">(рублей)</i></span>"

В случае с innerHTML мы получаем «салат» в котором намешаны HTML-элементы и текстовое содержимое. Фактически это тоже строковый тип данных. Визуально воспринимать такое содержимое гораздо сложнее.

 

Вывод

Разные задачи требуют разных подходов в реализации алгоритмов. Для быстрой и наглядной информации лучше использовать innerText. Для получения качественных структур данных лучше использовать innerHTML.

 

Кем являются innerText и innerHTML на самом деле, когда мы говорим о JavaScript?

innerText и innerHTML являются свойствами объектов JavaScript, которые получают именование по стандарту DOM. Что это значит?

Когда мы получаем какой-либо элемент из документа, то он является самым обычным объектом JavaScript.

Приведу живой пример на реальном сайте. Давайте получим элемент какой-нибудь ссылки.

Стандартная HTML-разметка нам проста и понятна:

<a data-v-414055a2="" target="_self" href="/category/elektrogrili-10549/" class="a0k9 b6z7"><span data-v-414055a2="">Электрогрили</span></a>

Теперь давайте посмотрим как её видит JavaScript во всём документе

 

 

Информационные ссылки

JavaScript | Чем отличается innerText от textContent?

WHATWG — «innerText» — https://html.spec.whatwg.org/#the-innertext-idl-attribute

WHATWG — «HTMLCollection» — https://dom.spec.whatwg.org/#interface-htmlcollection

WHATWG — «getElementsByTagName» — https://dom.spec.whatwg.org/#dom-document-getelementsbytagname

Github — «innerHTML» — https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin

W3C — «innerHTML» — https://www.w3.org/TR/DOM-Parsing/#widl-Element-innerHTML