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>');
Pet*_*ley 342
我认为差异几乎是不言自明的.测试它是非常重要的.
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文档中使用.
$(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>Pet*_*uss 105
((如有必要请更新,这个答案是维基))
.text()还是.html()？答: .html()更快!对于所有问题,请参见此处的"行为测试工具包".
因此,总而言之,如果您只有"文本",请使用html()方法.
注意:没有意义吗？请记住,该.html()函数只是一个包装器.innerHTML,但在.text()函数jQuery中添加了一个"实体过滤器",这个过滤器自然会消耗时间.
好吧,如果你真的想要性能 ...... 使用纯Javascript来访问nodeValue属性的直接文本替换.基准结论:
.html()速度比快2倍.text()..innerHTML比快3倍.html()..nodeValue比.html()约100 倍快,比约100倍,比.text()约20倍.innerHTML.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());
dav*_*dcl 57
该text()方法实体逃脱传递到它的任何HTML.text()当您要插入对查看该页面的人可见的HTML代码时使用.
从技术上讲,你的第二个例子产生:
<a href="example.html">Link</a><b>hello</b>
它将在浏览器中呈现为:
<a href="example.html">Link</a><b>hello</b>
您的第一个示例将呈现为实际链接和一些粗体文本.
Owa*_*shi 26
实际上两者看起来有点类似,但是完全不同,这取决于你的用途或意图你想要实现的目标,
.html()操作具有html元素的容器..text()修改通常具有单独的打开和关闭标记的元素的文本.text() 方法不能用于表单输入或脚本.
.val() 输入或textarea元素..html() 用于脚本元素的值.从中获取html内容.text()会将html标签转换为html实体.
.text() 可以在XML和HTML文档中使用..html() 仅适用于html文档.在jsfiddle上查看此示例以查看操作中的差异
奇怪的是,没有人提到的跨站点脚本预防的好处.text()超过.html()(虽然其他人刚才提到.text()逃脱的数据).
.text()当你想要更新DOM中的数据时,总是建议使用它,这只是数据/文本供用户查看.
.html() 应该主要用于获取div中的HTML内容.
当您打算将值显示为简单文本时,请使用.text(...).
当您打算将值显示为html格式的文本(或HTML内容)时,请使用.html(...).
当你不确定你的文本(例如来自输入控件)不包含HTML中具有特殊含义的字符/标签时,你肯定应该使用.text(...).这非常重要,因为这可能导致文本无法正常显示,但也可能导致不需要的JS脚本片段(例如来自其他用户输入)被激活.
| 归档时间： |
|
| 查看次数： |
148861 次 |
| 最近记录： |