InnerText vs innerHtml vs label vs text vs textContent vs externalText

У меня есть раскрывающийся список, который заполняется Javascript.

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

  • innerText
  • innerHtml
  • label
  • text
  • textContent
  • outerText

В моем собственном исследовании показаны тесты для маркировки стендов или сравнения между некоторыми из них, но не все.

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

Мои выводы:

  • innerText покажет значение as is и игнорирует любое форматирование HTML, которое может быть включено
  • innerHtml отобразит значение и применит любое форматирование HTML
  • label выглядит так же, как innerText, я не вижу разницы
  • text выглядит так же, как innerText, но сокращенная версия jQuery
  • textContent отображается так же, как innerText, но сохраняет форматирование (например, \n)
  • outerText выглядит таким же, как innerText

Мое исследование может занять меня только до тех пор, пока я могу только проверить, что я могу думать или читать, что опубликовано, может ли кто-нибудь подтвердить, если мои исследования верны и если что-то особенное в label и outerText?

ОТВЕТЫ

Ответ 1

Из MDN:

В Internet Explorer представлен элемент element.innerText. Намерение в значительной степени совпадает с [textContent] с несколькими отличиями:

  • Обратите внимание: в то время как textContent получает содержимое всех элементов, включая элементы <script> и <style>, в основном эквивалентное свойство, специфичное для IE, innerText не поддерживает.

  • innerText также знает стиль и не будет возвращать текст скрытых элементов, тогда как textContent будет.

  • Поскольку innerText знает стиль CSS, он вызывает рефлексию, а textContent - нет.

Поэтому innerText не будет включать текст, который скрыт CSS, но textContent будет.

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

В случае, если вы пропустили это, позвольте мне повторить это более четко: не используйте .innerHTML если вы специально не намерены вставлять HTML в элемент и приняли необходимые меры предосторожности, чтобы убедиться, что вставляемый HTML не может содержать вредоносный контент. Если вы хотите вставить текст, используйте .textContent или если вам нужно поддерживать IE8 и более ранние версии, используйте функцию обнаружения функций для отключения между .textContent и .innerText.

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

Для некоторых из других: outerHTML в основном такой же, как innerHTML, за исключением того, что он включает начальный и конечный теги элемента, к которому он принадлежит. Я вообще не могу найти много описания outerText. Я думаю, что это, вероятно, неясное наследие, и его следует избегать.

Ответ 2

Выпадающий список содержит коллекцию объектов Option, поэтому вы должны использовать свойство .text для проверки текстового представления элемента, то есть

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

Btv,

.text оказывается таким же, как .innerText, но сокращенная версия JQuery

Это не правильно; $(element).text() - это версия jQuery, тогда как element.text - это версия доступа к свойствам.

Ответ 3

Добавление к JLRише отличного ответа:

Причина innerText и outerText существует и для симметрии с innerHTML и outerHTML. Это становится важным, если вы назначьте свойство.

Предположим, у вас есть элемент e с кодом HTML <b>Lorem Ipsum</b>:

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

Ответ 4

См. совместимость браузеров http://www.quirksmode.org/dom/html/, если вы ориентируетесь на определенные браузеры. Потому что кажется, что у всех есть свой способ делать что-то. Поэтому лучше использовать JQuery.text() (http://api.jquery.com/text/), если вы не хотите заниматься скриптом.

Ответ 5

textContent не будет форматировать (\n)