HTMLElement: свойство innerText

Базовая Широко доступно

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

В качестве геттера оно приблизительно соответствует тексту, который пользователь получит, если выделит содержимое элемента курсором и скопирует его в буфер обмена. В качестве сеттера оно заменяет потомков элемента заданным значением, преобразуя любые разрывы строк в элементы <br>.

Примечание: innerText легко перепутать с Node.textContent, но между ними есть важные различия. В основном, innerText учитывает визуальное представление текста, в то время как textContent — нет.

Значение

Строка, представляющая отрендеренный текстовый контент элемента.

Если сам элемент не отображается (например, откреплён от документа или скрыт), возвращаемое значение совпадает со свойством Node.textContent.

Предупреждение: Установка innerText для узла удаляет все дочерние узлы узла и заменяет их единственным текстовым узлом с заданным строковым значением.

Примеры

Этот пример сравнивает innerText с Node.textContent. Обратите внимание, как innerText учитывает такие элементы, как <br>, и игнорирует скрытые элементы.

HTML

<h3>Source element:</h3>
<p id="source">
  <style>
    #source {
      color: red;
    }
    #text {
      text-transform: uppercase;
    }
  </style>
  <span id="text">
    Take a look at<br />
    how this text<br />
    is interpreted below.
  </span>
  <span style="display:none">HIDDEN TEXT</span>
</p>
<h3>Result of textContent:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>…</textarea>
<h3>Result of innerText:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>…</textarea>

JavaScript

const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");

textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;

Результат

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

Спецификация
HTML # the-innertext-idl-attribute

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`innerText`	1	12	45	9.6	1	18	45	10.1	1	1.0	1

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText