Что является различием между jQuery: текст () и HTML ()?

Что различие между текстом () и HTML () функционирует в jQuery?

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

по сравнению с

$("#div").text('<a href="example.html">Link</a><b>hello</b>');
267
задан Balaji Kandasamy 24 August 2013 в 01:17
поделиться

5 ответов

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

.
65
ответ дан 23 November 2019 в 02:22
поделиться

В основном, $("#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).
2
ответ дан 23 November 2019 в 02:22
поделиться

Метод 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>

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

.
57
ответ дан 23 November 2019 в 02:22
поделиться

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

jQuery.html() трактует строку как HTML, jQuery.text() трактует содержимое как 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('Ссылкаhello'); $("#div2").text('Ссылкаhello'); });
 
Живая демонстрация на http://jsfiddle.net/hossain/sUTVg/.
342
ответ дан 23 November 2019 в 02:22
поделиться

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

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

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

Я бы предположил, что они соответствуют Node#textContent и Element#innerHTML, соответственно. (ссылки на Гекко ДОМ)

.
2
ответ дан 23 November 2019 в 02:22
поделиться
Другие вопросы по тегам:

Похожие вопросы: