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

当前回答

尽可能使用.text(),因为它会转义HTML,特别是如果您正在添加任何不受信任的数据,例如来自用户输入。. HTML()有一些xss漏洞

其他回答

基本上,$("#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).

简单来说。

Html()——获取内部Html (Html标签和文本)。

Text()——如果内部存在,则只获取文本(只获取文本)

(如有必要请更新,这个答案是Wiki)

子问题:当只有文本时,.text()或.html()哪个更快?

答案:.html()更快!请看这里所有问题的“行为测试包”。

所以,总之,如果你只有“一个文本”,使用html()方法。

注:说不通吗?请记住,.html()函数只是. innerhtml的包装器,但在.text()函数中,jQuery添加了一个“实体过滤器”,这个过滤器自然会消耗时间。


好吧,如果你真的想要性能……使用纯Javascript访问nodeValue属性的直接文本替换。 基准测试结论:

jQuery的.html()比.text()快2倍。 纯JS的. innerhtml比.html()快3倍。 纯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(),因为它会转义HTML,特别是如果您正在添加任何不受信任的数据,例如来自用户输入。. HTML()有一些xss漏洞

text函数将值设置或检索为纯文本,否则,HTML函数将值设置或检索为HTML标记,以更改或修改该值。 如果你只想改变内容,那么使用text()。但是如果你需要改变标记,那么你必须使用hmtl()。

这对我来说是个愚蠢的答案,别介意。