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

Какая разница между функциями 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>');

Ответы

Ответ 1

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

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>

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

В документации по .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>

Ответ 2

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

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

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

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

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

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

  • jQuery .html() ~ 2x быстрее, чем .text().
  • чистый JS '.innerHTML ~ 3 раза быстрее, чем .html().
  • чистый JS '.nodeValue составляет ~ 50 раз быстрее, чем .html(), ~ 100x чем .text() и ~ 20x чем .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());

Ответ 3

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

Ответ 4

Сущность метода 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>

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

Ответ 5

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

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

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

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

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

    • .val() для элементов ввода или textarea.
    • .html() для значения элемента script.

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

Разница:

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

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

Пример

Ответ 6

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

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

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

Ответ 7

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

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

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

Ответ 8

В принципе, $( "# 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).

Ответ 9

Ну, в простом смысле.

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

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

Ответ 10

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

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

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

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

Ответ 11

Я думаю, что разница заключается в вставке html-тега в text() тэг html не работает

$('#output').html('You are registered'+'<br>'  +'  '
                     + 'Mister'+'  ' + name+'   ' + sourname ); }

вывод:

You are registered <br> Mister name sourname

заменив text() на html()

вывод

You are registered
Mister name sourname

тогда тег <br> работает в html()

Ответ 12

текстовая функция задает или извлекает значение в виде обычного текста, в противном случае функция HTML задает или извлекает значение в качестве HTML-тегов для изменения или изменения этого. Если вы хотите просто изменить содержимое, используйте текст(). Но если вам нужно изменить разметку, вы должны использовать hmtl().

Это фиктивный ответ для меня через шесть лет, не против.

Ответ 13

.html() оценивается как html, а .text() как текст.
Рассмотрим блок HTML
HTML

<div id="mydiv">
<div class="mydiv">
    This is a div container
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
    a text after ul
</div>
</div>

JS

var out1 = $('#mydiv').html();
var out2 = $('#mydiv').text();
console.log(out1) // This output all the html tag
console.log(out2) // This is output just the text 'This is a div container Link 1 Link 2 a text after ul'

Иллюстрация по этой ссылке http://api.jquery.com/text/

Ответ 14

.text() даст вам фактический текст между тегами HTML. Например, текст абзаца между тегами p. Интересно отметить, что он даст вам весь текст в элементе, на который вы нацеливаетесь с помощью вашего $ selector, плюс весь текст в дочерних элементах этого выбранного элемента. Так что, если у вас есть несколько тегов p с текстом внутри элемента body и вы делаете $(body).text(), вы получите весь текст из всех абзацев. (Только текст, а не сами теги p.)

.html() даст вам текст и теги. Таким образом, $(body).html() основном даст вам всю HTML-страницу вашей страницы.

.val() работает для элементов, имеющих атрибут value, таких как input. Входные данные не содержат текст или HTML, поэтому .text() и .html() оба будут нулевыми для элементов ввода.