Различия между .text() и .html() с экранированными символами <и>

Учитывая следующий фрагмент HTML:

<p id="para">hello &lt;world&gt;</p>

jQuery .text() и .html() методы возвращают разные значения...

var text = $('#para').text(); // gives 'hello <world>'
var html = $('#para').html(); // gives 'hello &lt;world&gt;'

В документации к jQuery указано

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

и...

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

Но эта конкретная разница с < и >, кажется, нигде не документирована.

Может ли кто-нибудь прокомментировать обоснование этой разницы?

Изменить

Немного больше исследований свидетельствует о том, что значения .text() и .html() соответствуют тем, что указаны в нативных JavaScript innerText и innerHTML, соответственно (когда селектор jQuery вернул хотя бы один элемент). Опять же, это не отражено в документации jQuery, поэтому я не уверен на 100%, если это наблюдение сохраняется во всех сценариях. Чтение через источника jQuery показывает, что это не то, что на самом деле происходит под капотом.

Ответы

Ответ 1

Это соответствует соответствующим методам JavaScript textContent и innerHTML.

>> console.log(document.getElementsByTagName('p')[0].textContent);
hello <world>

>> console.log(document.getElementsByTagName('p')[0].innerHTML);
hello &lt;world&gt;

Ответ 2

Я думаю, что это происходит, так что round-tipping может работать правильно. Вы должны иметь возможность получить идеальный клон исходного контента, вызвав $() в результате HTML():

var clonedContent = $($("#para").html());

Если объекты HTML не были экранированы с помощью html(), это создало бы элемент <world>, который не существует в исходном контенте.

Ответ 3

.html(): Получите содержимое HTML первого элемента в наборе согласованных элементов.

.text(): Получите объединенное содержимое text каждого элемента в наборе согласованных элементов, включая их потомков.

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

Ответ 4

.html() предоставляет HTML-контент. Если бы преобразовать < и > в открывающие и закрывающие теги, это может легко повредить все, создав бессмысленные элементы. т.е. элемент <world> в вашем примере

.text() предоставляет текстовое содержимое, в котором нет кода разметки. Поэтому безопасно преобразовать знаки < и > в < меньше "и больше.