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

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

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

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

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

Примеры

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

4 пункта из списка
4 пункта из списка

Так выглядит 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")
Получение массива HTML-элементов одного типа в JavaScript
Получение массива HTML-элементов одного типа в JavaScript

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

innerText

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

На выходе мы получаем строковый тип данных без первоначального форматирования. То есть «голый» текст, который заключён внутри элементов <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>"
Вывод в консоль браузера свойство innerText
Вывод в консоль браузера свойство innerText

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

 

Вывод

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

Ссылки

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

Поделись записью