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>');
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>');
当前回答
(如有必要请更新,这个答案是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());
其他回答
(如有必要请更新,这个答案是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());
我认为区别在于插入html标签 在text()中你的HTML标签没有函数
$('#output').html('You are registered'+'<br>' +' '
+ 'Mister'+' ' + name+' ' + sourname ); }
输出:
You are registered <br> Mister name sourname
用html()替换text()
输出
You are registered
Mister name sourname
那么标签<br>在html()中工作
var v = "全名";
$("#div").html(v); //display as "全名"
$("#div").text(v); //display as "全名"
text()——该方法设置或返回所选元素的文本内容。 html()——该方法设置或返回所选元素的内容。 参考示例:https://www.tutorialspoint.com/online_jquery_editor.php
基本上,$("#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).
奇怪的是,没有人提到.text()相对于.html()的跨站点脚本预防好处(尽管其他人刚刚提到。text()转义数据)。
当你想要更新DOM中的数据时,总是建议使用.text(),这只是用户可以看到的数据/文本。
. HTML()应该主要用于获取div中的HTML内容。