В чем разница между jQuery: text () и html ()? - PullRequest
Новая
       69

В чем разница между jQuery: text () и html ()?

259 голосов
/ 16 декабря 2009

В чем разница между функциями text () и html () в jQuery? 

$("#div").html('<a href="example.html">Link</a><b>hello</b>');

против 

$("#div").text('<a href="example.html">Link</a><b>hello</b>');

Ответы [ 14 ]

337 голосов
/ 16 декабря 2009

Я думаю, что разница почти очевидна. И это супер тривиально для тестирования.

jQuery.html() обрабатывает строку как HTML, jQuery.text() обрабатывает содержимое как текст 

<html>
<head>
  <title>Test Page</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
      $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
    });
  </script>
</head>

<body>

<div id="div1"></div>
<div id="div2"></div>

</body>
</html>

Различие, которое может быть не столь очевидным, описано в документации по jQuery API

В документации для .html () :

Метод .html() недоступен в документах XML.

А в документации для .text () :

В отличие от метода .html(), .text() может использоваться как в документах XML, так и в HTML. 

$(function() {
  $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
  $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
Живая демоверсия на http://jsfiddle.net/hossain/sUTVg/
104 голосов
/ 24 августа 2013

((пожалуйста, обновите при необходимости, этот ответ вики))

Подвопрос: когда только текст, что быстрее, .text() или .html()?

Ответ: .html() быстрее! См. здесь «набор для проверки поведения» по всем вопросам .

Итак, в заключение, , если у вас есть «только текст», используйте метод html().

Примечание: Не имеет смысла? Помните, что функция .html() является только оболочкой для .innerHTML, но в функции .text() jQuery добавляет «фильтр сущностей» , и этот фильтр, естественно, потребляет время.

Хорошо, , если вы действительно хотите производительность ... Используйте чистый Javascript для доступа к прямой замене текста свойством nodeValue. Контрольные выводы:

  • jQuery .html() примерно в 2 раза быстрее .text().
  • pure JS '.innerHTML в 3 раза быстрее .html().
  • pure JS '.nodeValue в ~ 50 раз быстрее, чем .html(), ~ в 100 раз, чем .text(), и в ~ 20 раз, чем .innerHTML.

PS: .textContent свойство было введено с DOM-Level-3, .nodeValue - это DOM-Level-2 и быстрее (!).

См. этот полный тест : 

// Using jQuery:
simplecron.restart(); for (var i=1; i<3000; i++) 
    $("#work").html('BENCHMARK WORK');
var ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++) 
    $("#work").text('BENCHMARK WORK');
alert("JQuery (3000x): \nhtml="+ht+"\ntext="+simplecron.duration());

// Using pure JavaScript only:
simplecron.restart(); for (var i=1; i<3000; i++)
    document.getElementById('work').innerHTML = 'BENCHMARK WORK';
ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++) 
    document.getElementById('work').nodeValue = 'BENCHMARK WORK';
alert("Pure JS (3000x):\ninnerHTML="+ht+"\nnodeValue="+simplecron.duration());
64 голосов
/ 16 декабря 2009

Первый пример будет фактически вставлять HTML в div, тогда как второй пример будет экранировать текст путем замены связанных с элементом символов их соответствующими символьными объектами , чтобы он отображался буквально (т.е. HTML будет отображается не отображается).

56 голосов
/ 16 декабря 2009

Сущность метода text() экранирует любой переданный в него HTML-код. Используйте text(), когда хотите вставить HTML-код, который будет виден людям, просматривающим страницу.

Технически, ваш второй пример выдает: 

&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;b&gt;hello&lt;/b&gt;

, который будет отображаться в браузере как: 

<a href="example.html">Link</a><b>hello</b>

Ваш первый пример будет отображен как фактическая ссылка и текст, выделенный жирным шрифтом.

26 голосов
/ 17 декабря 2012

На самом деле оба выглядят несколько схожими, но совершенно разные, это зависит от вашего использования или намерения, чего вы хотите достичь,

Где использовать:

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

Где не использовать:

  • .text() метод не может использоваться для ввода данных или сценариев.

    • .val() для элементов ввода или текстовой области.
    • .html() для значения элемента скрипта.

  • При получении html-содержимого из .text() преобразуются html-теги в html-объекты.

Разница:

  • .text() может использоваться как в XML, так и в HTML документах.
  • .html() только для html документов.

Проверьте этот пример на jsfiddle, чтобы увидеть различия в действии

* 1 049 * Пример * +1051 *

9 голосов
/ 07 августа 2015

Странно, что никто не упомянул о преимуществе предотвращения межсайтовых сценариев .text() над .html() (хотя другие только что упомянули, что .text() экранирует данные).

Всегда рекомендуется использовать .text(), когда вы хотите обновить данные в DOM, которые являются просто данными / текстом для просмотра пользователем.

.html() в основном следует использовать для получения содержимого HTML внутри div.

5 голосов
/ 18 августа 2013

Используйте .text (…), если вы хотите отобразить значение в виде простого текста.

Используйте .html (…), если вы хотите отобразить значение в виде текста в формате html (или содержимого HTML).

Вам определенно следует использовать .text (...) , если вы не уверены, что ваш текст (например, поступающий из элемента управления вводом) не содержит символов / тегов, которые имеют особое значение в HTML. Это действительно важно , поскольку это может привести к тому, что текст будет отображаться некорректно, но также может привести к активации нежелательного фрагмента сценария JS (например, поступающего из другого пользовательского ввода) .

2 голосов
/ 30 марта 2018

Ну, если говорить простым языком.

html () - для получения внутреннего html (теги html и текст).

text () - чтобы получить только текст, если присутствует внутри (только текст)

2 голосов
/ 16 декабря 2009

$ ('. Div'). Html (val) установит значения HTML всех выбранных элементов, $ ('. Div'). Text (val) установить текстовые значения всех выбранных элементов.

Документы API для jQuery.text ()

Документы API для jQuery.html ()

Я бы предположил, что они соответствуют Node # textContent и Element # innerHTML соответственно. (Ссылки Gecko DOM).

2 голосов
/ 16 декабря 2009

В основном, $ ("# div"). Html использует element.innerHTML для установки содержимого, а $ ("# div"). Text (возможно) использует element.textContent.

http://docs.jquery.com/Attributes/html: 

Set the html contents of every matched element

http://docs.jquery.com/Attributes/text: 

Similar to html(), but escapes HTML (replace "<" and ">" with their HTML 
entities).
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...