.text（）和.html（）之间的差异与转义的字符

给出以下HTML片段：

hello <world> 

jQuery .text()和.html()方法将返回不同的值…

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

jQuery文档说明

.text()方法的结果是一个包含所有匹配元素的组合文本的字符串。

和…

在HTML文档中，我们可以使用.html()来获取任何元素的内容。 如果选择器表达式匹配多个元素，则仅返回第一个HTML内容。

但这与< 和> 似乎没有在任何地方记录。

任何人都可以评论这种差异的理由吗？

编辑

更多的调查表明，值.text()和.html()与原生JavaScript innerText和innerHTML调用相匹配（至少在jQuery选择器返回单个元素时）。 同样，这并没有反映在jQuery文档中，所以我不能100％确定这种观察是否适用于所有场景。 阅读jQuery源代码可以发现，这并不是真正发生的事情。

Answer 1

这是按照相应的JavaScript方法textContent和innerHTML 。

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

Answer 2

我认为这样可以使得往返可以正常工作。 您应该能够通过在html（）的结果上调用$（）来获得原始内容的完美克隆：

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

如果HTML实体未被html()转义，则上述内容将创建原始内容中不存在的元素。

Answer 3

.html（）：获取匹配元素集中第一个元素的HTML内容。

.text（）：获取匹配元素集合中每个元素的组合文本内容，包括它们的后代。

使用.text（）可以获得真实的显示文本。 使用.html（），您将获得所有childelements的html。

Answer 4

.html（）为您提供HTML内容。 如果它要转换< 和> 打开和关闭标签，它可以通过创建无意义的元素轻松搞乱一切。 即你的例子中的元素

.text（）为您提供其中没有任何标记代码的文本内容。 因此，转换是安全的< 和> “ 小于 ”和“ 大于 ”的迹象。