jQuery中的text（）和html（）函数之间有什么区别？

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


vs 

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


评论

一个不言自明的问题：当我们只需要文本（不需要html标签）时，text（）方法会更快？多少钱？

#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>


可能不会在jQuery API文档中有如此明显的描述。

在.html（）的文档中：


.html()方法在XML文档中不可用。


在.text（）的文档中：


与.html()方法不同，.text()可以在XML和HTML文档中使用。 br /> 




 $(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/
上的实时演示

评论

还要注意的是，两者的长度也不同。 jsfiddle.net/sUTVg/458

–卡特里娜飓风
2015年5月20日下午16:50
@aequalsb我认识到这是一个老问题了，但是我必须指出，由于文本被视为HTML，因此默认情况下使用´.html（）会很危险。如果您从querystring参数，表单，标题，URL或其他您无法提供或编辑的其他地方获得该文本，则您对XSS敞开了怀抱。

–犬
17-10-12在18:35

#2 楼

（（（如有必要，请更新，此答案为Wiki））
子问题：仅文本时，.text()或.html()更快？
答案：.html()更快！有关所有问题，请参见此处的“行为测试工具包”。
因此，总之，如果您只有“文本”，请使用html()方法。
注意：这没有道理吗？请记住，.html()函数只是.innerHTML的包装器，但是jQuery在.text()函数中添加了一个“实体过滤器”，该过滤器自然会消耗时间。

好吧，如果您真的想要性能...使用纯Javascript通过nodeValue属性访问直接替换文本。
基准结论：

jQuery的.html()比.text()快约2倍。
纯JS的.innerHTML快约3倍。比.html()快。
纯JS的.nodeValue比.html()快50倍，比.text()快100倍，比.innerHTML快20倍。

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());


评论

但是，如果处理不受信任的输入，则应尽可能使用text（）。

–斯科特·西蒙蒂斯（Scott Simontis）
15年8月31日在15:15
@ScottSimontis when you set nodeValue property, it transforms ">" into "<", etc.

– Peter Krauss
Aug 31 '15 at 20:09


当我使用Chrome DevTools（developer.chrome.com/devtools/docs/timeline）进行“基准测试”时，结果相反（.text（）似乎比.html（）快7倍）。源代码：codepen.io/damhonglinh/pen/vGpQEO。我测试了1500个元素； .html（）花费了约220毫秒，.text（）花费了约30毫秒。

–林坝
16-4-8在18:19


嗨@LinhDam。嗯...使用完整的基准测试，我的Firefox说“ JQ TIMES（3000x）：html = 82 text = 254”，“ JS TIMES（3000x）：html = 15 text = 4” ...而我的Chrome浏览器说“ JQ TIMES（3000x）：html = 82 text = 202“，” JS TIMES（3000x）：html = 16 text = 0“ ....因此（Firefox和Chrome）的时间比例相同。

– Peter Krauss
16-4-9在19:15


要成为text（）和html（）之间的真实基准，应在所有情况下完成选择器或getElementById或$（“＃work”），否则您还将基准测试$（“＃work”）vs getElementById

– Octaviamu
19年1月25日在15:08

#3 楼

第一个示例实际上将HTML嵌入到div中，而第二个示例将通过将与元素相关的字符替换为其相应的字符实体来转义文本，以便按字面显示（即HTML将不显示）。 >

评论

对不起，我不太了解。您能否进一步解释。谢谢

–布雷特克
09年12月15日在22:20
您的意思是第二个示例将“编码”吗？已经在编码了，不是吗？

–布雷特克
09年12月15日在22:21
@Brettk-我说了“编码”，但这只不过是一指而过。我更改了答案以更好地反映我的意思。

–安德鲁·黑尔（Andrew Hare）
09年12月15日在22:22
He means that in the .text() function, all < will be replaced with <. So with .html() the browser will see a link and some bold text, with .text() the browser will see everything as text and not make a link or bold text.

– Mottie
Dec 15 '09 at 22:25

#4 楼

text()方法实体转义传递给它的任何HTML。当您要插入对查看页面的人可见的HTML代码时，请使用text()。

从技术上讲，您的第二个示例产生：

&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>


您的第一个示例将呈现为实际链接和一些粗体文本。

评论

这应该已经包含在所选答案中，以解释实际情况。

– d512
13年2月28日在16:04

#5 楼

实际上，两者看上去确实有些相似，但有很大不同，这取决于您的使用或意图要实现的目标，

使用位置：


使用.html()在具有html元素的容器上进行操作。
使用.text()修改通常具有单独的打开和关闭标签的元素的文本

不使用的地方：



.text()方法不能用于表单输入或脚本。




.val()用于输入或文本区域元素。

.html()表示脚本元素的值。


从.text()拾取html内容会将html标签转换为html实体。

差异：



.text()可以在XML和HTML文档中使用。

.html()仅用于html文档。

在jsfiddle上检查此示例看动作上的差异

示例

评论

这个答案是最容易理解和格式最好的+1

–凯蒂
18年9月12日在16:57
什么是diff bw :: html（data）; ＆val（数据）; @Owais Qureshi

–宝石
19年5月9日在9:39

#6 楼

奇怪的是，没有人提到.text()优于.html()的跨站点脚本防护优势（尽管其他人刚刚提到.text()可以转义数据）。 DOM只是供用户查看的数据/文本。

.text()应该主要用于在div中获取HTML内容。

#7 楼

打算将值显示为简单文本时，请使用.text（…）。

要将值显示为html格式的文本（或HTML内容）时，请使用.html（…）。

如果不确定您的文本（例如，来自输入控件的文本）是否不包含在HTML中具有特殊含义的字符/标签，则应绝对使用.text（...）。这真的很重要，因为这可能导致文本无法正确显示，但也可能导致不必要的JS脚本代码段（例如来自其他用户输入的代码）被激活。

#8 楼

.text()将为您提供HTML标记之间的实际文本。例如，段落文本在p标记之间。需要注意的是，它将为您提供使用$选择器定位的元素中的所有文本，以及该选定元素的子元素中的所有文本。因此，如果您在body元素内有多个带有文本的p标签，并且执行了$(body).text()，则将从所有段落中获取所有文本。 （仅文本，而不是p标签本身。）

.html()将为您提供文本和标签。因此，$(body).html()基本上可以为您提供整个页面的HTML页面

.val()适用于具有value属性的元素，例如input。
input不包含文本或HTML，因此.text()和对于.html()元素，null均为input。

#9 楼

基本上，$（“＃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).


#10 楼

$（'。div'）。html（val）将设置所有选定元素的HTML值，$（'。div'）。text（val）将设置所有选定元素的文本值。

jQuery.text（）的API文档

jQuery.html（）的API文档 。 （Gecko DOM参考）。

#11 楼

好吧，简单地说。

html（）-获取内部html（html标签和文本）。仅文字）

#12 楼

不同的是.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/

#13 楼

我认为区别是在text()中插入html标记
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()中起作用

评论

请更正您的答案，第一个代码段应使用text（）。

– MKaama
17年8月19日在8:54

#14 楼

text函数将值设置或检索为纯文本，否则，HTML函数将值设置或检索为HTML标记来更改或修改。
如果只想更改内容，则使用text（）。但是，如果您需要更改标记，则必须使用hmtl（）。

六年后，这对我来说是一个虚拟的答案，请不要介意。

#15 楼

**difference between text()&& html() && val()...?
#Html code..
<select id="d">
<option>Hello</option>
<option>Welcome</option>
</select>
# jquery code..
$(document).ready(function(){
   $("#d").html();
   $("#d").text();
   $("#d").val();

});


#16 楼

var v = "&#x5168;&#x540D;";
$("#div").html(v); //display as "全名"
$("#div").text(v); //display as "&#x5168;&#x540D;"

text（）–此方法设置或返回所选元素的文本内容。
html（）–此方法设置或返回所选元素的内容。
请参见示例：https： //www.tutorialspoint.com/online_jquery_editor.php