.innerText, .textContent и .innerHTML

MDN определяет это поле как:

Свойство innerText интерфейса HTMLElement представляет отображенное текстовое содержимое узла и его потомков.

Где возвращаемое значение представляет собой строку.

• Примечание: поскольку это строка, даже если содержащийся в ней текст является цифрой, могут вступить в силу правила типов данных.

Использование 1: Возврат текстового содержимого элемента или узла

Как геттер, он аппроксимирует текст, который пользователь получил бы, если бы он выделил содержимое элемента курсором, а затем скопировал его в буфер обмена. (МДН)

element.innerText
// or
node.innerText

Примечание. Согласно описанию, это возвращает «отображенный текст» узла. Это имеет различные последствия в зависимости от того, какие элементы и стили вложены/применены к этому узлу:

W3 и MDN отмечают некоторые из этих предостережений: «возвращает только текстовое содержимое элемента и всех его дочерних элементов без пробелов и тегов скрытого текста CSS, за исключением элементов ‹script› и ‹style›» (w3) и «innerText знает таких вещей, как элементы ‹br›, и игнорирует скрытые элементы [… и] принимает во внимание стили CSS» (MDN).

Сообщение в блоге Келли Нортон дает краткий способ думать об этом как «что представляет собой текст, представляемый пользователю [… где] элементы, которые не отображаются, также отсутствуют в innerText и (2) разрывы строк в innerText следуйте разрывам строк, которые были введены макетом.

Давайте рассмотрим несколько примеров этих вариантов использования:

<div>1. Plain text.</div>
<div>2. Text with hidden text between here<span style='visibility: hidden'> 'I am hidden' </span>and here.</div>
<div>3. Text with emphasis tag between here <em>'I am emphasized' </em>and here.</div>
<div>     4. Text with leading spaces, extra spacing between here       and here, and trailing spaces    </div>
<div>5. Text before br<br> and text after br</div>
<div>6. Text before 'new line',
more text after new line</div>
<div>7. Some text before commented text, <!-- here is my commented line, --> more text after comment</div>

Внутренний текст выше возвращает:

1. Plain text.
2. Text with hidden text between hereand here.
3. Text with emphasis tag between here 'I am emphasized' and here.
4. Text with leading spaces, extra spacing between here and here, and trailing spaces
5. Text before br
and text after br
6. Text before 'new line', more text after new line
7. Some text before commented text, more text after comment

Давайте углубимся в каждый вариант использования:

1. это была обычная строка без дочерних элементов или форматирования, которая возвращалась как есть.
2. эта строка содержит скрытый дочерний элемент ‹span› с текстом 'I am hidden', который не отображается для пользователя и поэтому не возвращается innerText.
   Примечание: поскольку пробелы вокруг скрытой строки были помещены в скрытый ‹span›, вы можете видеть, что строка, возвращаемая innerText, объединена (см. «между здесь и здесь»)
3. эта строка содержит вложенный акцент ‹em›. Возвращаемая строка лишилась тега выделения и вернула только содержащийся текст.
4. эта строка содержит лишние пробелы до, в середине и после строки. Возвращаемая строка лишила эти пробелы
5. эта строка содержит элемент ‹br› посередине. Это было интерпретировано в возвращаемой строке, которая теперь содержит разрыв строки.
6. эта строка содержит новую строку в HTML (которая не закодирована как ‹br›), и она удалена в возвращаемой строке
   предостережение: CSS-стиль типа white-space может повлиять на управляемость
7. эта строка содержит комментарий «вот моя закомментированная строка», который не включается в возвращаемую строку

Этот HTML-текст отображается как (Chrome без css):

Использование 2: переназначение значения узла

В качестве установщика он заменит дочерние элементы элемента заданным значением, преобразуя любые разрывы строк в элементы ‹br›. (МДН)

element.innerText = text
// or
node.innerText = text

Использование .innerText для установки содержимого узла удаляет ВСЕ внутреннее содержимое (текст, теги и т. д.) и заменяет его одним заданным строковым значением (MDN, w3):

Например: если у вас есть HTML-код с ‹div›, который содержит множество дочерних узлов (два дочерних узла ‹p›, один дочерний текстовый элемент, один дочерний элемент em›).

<div id="id1">
  <p>line 1</p>
  Line 2
  <p>line 3 <em>emphasized string</em></p>
</div>

Использование .innerText для установки содержимого ‹div› удалит все эти потомки и заменит их одним экземпляром данной строки.

const parent = document.getElementById('id1')
parent.innerText = `this is my new string
with a line break`
<div id="id1">this is my new string<br>with a line break</div>

Обратите внимание, что согласно описанию, поскольку данная строка содержит разрыв строки (с использованием обратных кавычек-разделителей), разрыв строки интерпретируется и вставляется как элемент ‹br›, таким образом отображаясь для пользователя.

В качестве альтернативы можно установить элемент как пустой:

const parent = document.getElementById('id1')
parent.innerText = ''
<div id="id1"></div>

Но… подождите… Я также слышал о .textContent… разве это не одно и то же?

.innerText и .textContent часто путают или используют взаимозаменяемо. Иногда их использование может привести к одному и тому же результату, но есть некоторые важные последствия.

MDN описывает эти различия как:

По сути, .innerText знает об отображении текста, а .textContent — нет.

В своем блоге Келли Нортон объясняет, что «[.textContent] — это необработанный текстовый контент внутри этих узлов, [а innerText] — это текст, представляемый пользователю».

Давайте определим .textContent и посмотрим на некоторые сходства и различия с .innerText. Мы будем выделять различия при описании .textContent, используя # в качестве индикатора.

.textContent

MDN определяет это поле как:

Свойство textContent интерфейса узла представляет текстовое содержимое узла и его потомков.

Где возвращаемое значение представляет собой строкуили null (если узел является документом или типом документа).

# подчеркивая различия:мы уже можем заметить, что определение .innerText почти такое же, за исключением того, что оно гласит: «представляет рендерингтекстовое содержимое» . Подробнее об этом позже.

Использование 1: Возврат текстового содержимого элемента или узла

Текстовое содержимое элемента и все потомки, с пробелами и скрытым текстом CSS, но без тегов. (В3)

element.textContent
// or
node.textContent

Давайте рассмотрим те же примеры, что и ранее:

<div>1. Plain text.</div>
<div>2. Text with hidden text between here<span style='visibility: hidden'> 'I am hidden' </span>and here.</div>
<div>3. Text with emphasis tag between here <em>'I am emphasized' </em>and here.</div>
<div>     4. Text with leading spaces, extra spacing between here       and here, and trailing spaces    </div>
<div>5. Text before br<br> and text after br</div>
<div>6. Text before 'new line',
more text after new line</div>
<div>7. Some text before commented text, <!-- here is my commented line, --> more text after comment</div>

TextContent выше возвращает:

1. Plain text.
2. Text with hidden text between here 'I am hidden' and here.
3. Text with emphasis tag between here 'I am emphasized' and here.
     4. Text with leading spaces, extra spacing between here       and here, and trailing spaces    
5. Text before br and text after br
6. Text before 'new line',
  more text after new line
7. Some text before commented text,  more text after comment

Давайте углубимся в каждый вариант использования:

1. это обычная строка без дочерних элементов или форматирования, которая возвращается как есть
2. эта строка содержит скрытый дочерний элемент ‹span› с текстом 'I am hidden', который не отображается пользователю, но возвращается textContent.
   #innerText НЕ возвращал скрытую строку
3. эта строка содержит вложенный акцент ‹em›. Возвращаемая строка лишилась тега выделения и вернула только содержащийся текст.
4. эта строка содержит лишние пробелы до, в середине и после строки. Возвращаемая строка сохраняет эти пробелы
   # innerText НЕ сохраняет эти пробелы
5. эта строка содержит элемент ‹br› посередине. Это НЕ было сохранено в возвращаемой строке
   #innerText сохранил элемент разрыва
6. эта строка содержит новую строку в HTML (которая не закодирована как ‹br›) и сохраняется как новая строка в возвращаемой строке
   # innerText НЕ сохранял этот разрыв строки
7. эта строка содержит комментарий «вот моя закомментированная строка», который не включается в возвращаемую строку

# для удобства сравнения –сопоставленные возвращаемые значения для каждого варианта использования приведены в конце этого блога.

Напоминаем, что этот HTML-текст отображается как (Chrome без css):

Использование 2: переназначение значения узла

Использование textContent и innerText аналогично. Смотрите раздел, описывающий это. Одним из замечаний является обработка разрывов строк в HTML:

const parent = document.getElementById('id1')
parent.textContent = `this is my new string
with a line break`
<div id="id1">this is my new string
with a line break</div>

Обратите внимание, что, в отличие от innerText, разрыв строки НЕ интерпретируется как элемент ‹br›, но сохраняется как разрыв строки в HTML, поэтому не отображается для пользователя.

Теперь, когда мы рассмотрели различную обработку одних и тех же вариантов использования, давайте еще раз суммируем концептуальные различия. В блоге Келли Нортон представлен еще один способ осмыслить это как:

Лучший способ думать о innerText — это примерно то, что вы получили бы, если бы выделили текст и скопировали его.

Принимая во внимание, что textContent — это просто объединение значений всех TextNodes в поддереве.

Келли Нортон объясняет, почему innerText, вероятно, не то, что вам нужно. Я рекомендую вам прочитать их блог, чтобы узнать больше об их рассуждениях о различиях в производительности.

В этой потоке StackOverflow представлены дополнительные примеры и обсуждения этих различий сообществом.

И последнее… часто innerText и textContent используются в ситуациях, подобных innerHTML, поэтому мы быстро представим .innerHTML и еще раз посмотрим на наши примеры.

.innerHTML

MDN определяет это поле как:

Свойство элемента innerHTML получает или задает разметку HTML или XML, содержащуюся в элементе.

Где возвращаемое значение представляет собой строку, « содержащую сериализацию HTML потомков элемента». (МДН)

Использование 1: Возврат текстового содержимого элемента или узла

Свойство innerHTML можно использовать для проверки текущего исходного HTML-кода страницы, включая любые изменения, внесенные с момента первоначальной загрузки страницы. [… Возвращаемая строка представляет собой сериализованный] HTML-фрагмент, состоящий из потомков элементов. (МДН)

Это означает, что возвращаются все потомки элемента, включая любые теги, комментарии и текстовое содержимое.

element.innerHTML

Давайте рассмотрим те же примеры, что и ранее:

<div>1. Plain text.</div>
<div>2. Text with hidden text between here<span style='visibility: hidden'> 'I am hidden' </span>and here.</div>
<div>3. Text with emphasis tag between here <em>'I am emphasized' </em>and here.</div>
<div>     4. Text with leading spaces, extra spacing between here       and here, and trailing spaces    </div>
<div>5. Text before br<br> and text after br</div>
<div>6. Text before 'new line',
more text after new line</div>
<div>7. Some text before commented text, <!-- here is my commented line, --> more text after comment</div>

innerHTML из приведенного выше возвращает:

1. Plain text.
2. Text with hidden text between here<span style="visibility: hidden"> 'I am hidden' </span>and here.
3. Text with emphasis tag between here <em>'I am emphasized' </em>and here.
     4. Text with leading spaces, extra spacing between here       and here, and trailing spaces    
5. Text before br<br> and text after br
6. Text before 'new line',
  more text after new line
7. Some text before commented text, <!-- here is my commented line, --> more text after comment

Давайте углубимся в каждый вариант использования:

1. это была обычная строка без дочерних элементов или форматирования, которая возвращалась как есть.
2. эта строка содержит скрытый дочерний элемент ‹span› с текстом 'Я скрыт', который не отображается для пользователя. innerHTML вернул вложенный скрытый тег ‹span› и текст внутри него
   #innerText НЕ вернул скрытую строку ; textContent НЕ возвращает тег ‹span›, только его содержимое
3. эта строка содержит вложенный акцент ‹em›. Возвращенная строка содержит тег ‹em› и текст внутри него
   #ни innerText, ни textContent не сохранили тег ‹em›, только его содержимое
4. эта строка содержит лишние пробелы до, в середине и после строки. Возвращаемая строка сохраняет эти пробелы
   # innerText НЕ сохраняет эти пробелы
5. эта строка содержит элемент ‹br› посередине. Это было сохранено как тег ‹br› (а не как новая строка) в возвращаемой строке
   #innerText сохранил элемент разрыва как разрыв строки, а textContent не сохранил его вообще
6. эта строка содержит новую строку в HTML (которая не закодирована как ‹br›) и сохраняется в возвращаемой строке как новая строка
   # innerText НЕ сохранял этот разрыв строки
7. эта строка содержит комментарий «вот моя прокомментированная строка», который возвращается вместе с пометкой комментария
   # ни innerText, ни textContent не сохранили этот комментарий

# для удобства сравнения –сопоставленные возвращаемые значения для каждого варианта использования приведены в конце этого блога.

Напоминаем, что этот HTML-текст отображается как (Chrome без css):

Использование 2: переназначение значения элемента

Установка значения innerHTML удаляет все потомки элемента и заменяет их узлами, созданными путем синтаксического анализа HTML, указанного в строке htmlString. (МДН)

element.innerHTML= htmlString

Подобно innerText и textContent, он заменяет всех существующих потомков элемента. Кроме того, insertAdjacentHTML() можно использовать для вставки HTML-разметки в уже существующий контент.

Замена/вставка html-текста может привести к нарушению безопасности, поскольку пользователь может вставить вредоносный код на ваш сайт. Не рекомендуется захватывать пользовательский контент с помощью innerHTML. SetHTML() — альтернатива пользовательскому вводу. (MDN)

Давайте посмотрим на наш предыдущий пример HTML с ‹div›, который содержит множество дочерних узлов (два дочерних узла ‹p›, один дочерний элемент text, один дочерний элемент em›).

<div id="id1">
  <p>line 1</p>
  Line 2
  <p>line 3 <em>emphasized string</em></p>
</div>

Использование .innerHTML для установки содержимого ‹div› удалит все эти потомки и заменит их одним экземпляром данной htmlString. Вставляемая htmlString может быть:

а. Пустая htmlString, которая очищает внутреннее содержимое элемента (аналогично innerText и textContent):

const parent = document.getElementById('id1')
parent.innerHTML = ''
<div id="id1"></div>

б. Текстовая строка, которая задает все содержимое элемента как htmlString (аналогично innerText и textContent):

const parent = document.getElementById('id1')
parent.innerHTML = `this is my new string
with a line break`
<div id="id1">this is my new string
with a line break</div>

Обратите внимание, что, в отличие от innerText, разрыв строки НЕ интерпретируется как элемент ‹br›, но сохраняется как разрыв строки в HTML, поэтому не отображается для пользователя.

в. Отформатированная htmlString, включающая теги и/или текстовые элементы, которая создает новые узлы:

const parent = document.getElementById('id1')
let name = 'Ivan'
const myHtml = `<p>Hello</p><p>My name is ${name}</p><p>I am the <em>Best</em> dog</p>`
parent.innerHTML = myHtml
<div id="id1">
  <p>Hello</p>
  <p>My name is Ivan</p>
  <p>I am the <em>Best</em> dog</p>
</div>

Обратите внимание, что вышеприведенное заменило все дочерние элементы целевого ‹div› серией других элементов, как указано в htmlString, включая вложенные элементы.

Обратите внимание, что добавление элементов HTML с помощью innerHTML может повлиять на прослушиватели предыдущих событий (MDN).

Источники

внутренний текст

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
• https://www.w3schools.com/jsref/prop_node_innertext.asp

textContent

• https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
• https://www.w3schools.com/jsref/prop_node_textcontent.asp

внутреннийHTML

• https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
• https://www.w3schools.com/jsref/prop_html_innerhtml.asp

Блог Келли Нортон: https://kellegous.com/j/2013/02/27/innertext-vs-textcontent/

Ветка StackOverflow: https://stackoverflow.com/a/35213639

Параллельные примеры

Обычная строка без дочерних элементов или форматирования.

<div>1. Plain text.</div>
//innerText
1. Plain text.
//textContent
1. Plain text.
//innerHTML
1. Plain text.

Строка, содержащая скрытый дочерний элемент ‹span› с текстом «Я скрыт», который не отображается пользователю.

<div>2. Text with hidden text between here<span style='visibility: hidden'> 'I am hidden' </span>and here.</div>
//innerText
2. Text with hidden text between hereand here.
//textContent
2. Text with hidden text between here 'I am hidden' and here.
//innerHTML
2. Text with hidden text between here<span style="visibility: hidden"> 'I am hidden' </span>and here.

Строка, содержащая вложенный акцент ‹em›.

<div>3. Text with emphasis tag between here <em>'I am emphasized' </em>and here.</div>
//innerText
3. Text with emphasis tag between here 'I am emphasized' and here.
//textContent
3. Text with emphasis tag between here 'I am emphasized' and here.
//innerHTML
3. Text with emphasis tag between here <em>'I am emphasized' </em>and here.

Строка, содержащая лишние пробелы до, в середине и после строки.

<div>     4. Text with leading spaces, extra spacing between here       and here, and trailing spaces    </div>
//innerText
4. Text with leading spaces, extra spacing between here and here, and trailing spaces
//textContent
     4. Text with leading spaces, extra spacing between here       and here, and trailing spaces    
//innerHTML
     4. Text with leading spaces, extra spacing between here       and here, and trailing spaces

Строка, содержащая элемент ‹br› посередине.

<div>5. Text before br<br> and text after br</div>
//innerText
5. Text before br
and text after br
//textContent
5. Text before br and text after br
//innerHTML
5. Text before br<br> and text after br

Строка, содержащая новую строку в HTML (которая не закодирована как ‹br›).

<div>6. Text before 'new line',
more text after new line</div>
//innerText
6. Text before 'new line', more text after new line
//textContent
6. Text before 'new line',
  more text after new line
//innerHTML
6. Text before 'new line',
  more text after new line

Строка, содержащая комментарий «вот моя закомментированная строка».

<div>7. Some text before commented text, <!-- here is my commented line, --> more text after comment</div>
//innerText
7. Some text before commented text, more text after comment
//textContent
7. Some text before commented text,  more text after comment
//innerHTML
7. Some text before commented text, <!-- here is my commented line, --> more text after comment

Напоминаем, что этот HTML-текст отображается как (Chrome без css):

Написано 8 марта 2023 г.