Answers:
我认为差异几乎是不言而喻的。测试非常简单。
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>
((如有必要,请更新,此答案是维基))
.text()
还是.html()
?答: .html()
更快!有关所有问题,请参见此处的“行为测试工具包”。
因此,总而言之,如果您只有“一个文本”,请使用html()
方法。
注意:没有意义吗?请记住,该.html()
函数只是的包装.innerHTML
,但是.text()
jQuery 在函数中添加了“实体过滤器”,该过滤器自然会浪费时间。
好吧,如果您真的想要性能 ... 使用纯Javascript访问该nodeValue
属性的直接文本替换。基准结论:
.html()
速度比快2倍.text()
。.innerHTML
比快3倍.html()
。.nodeValue
比快约50倍,比.html()
约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());
nodeValue
属性,它把“>”到“&LT;”等等
.text()
似乎比快约7倍.html()
)。源代码:codepen.io/damhonglinh/pen/vGpQEO。我测试了1500个元素;.html()
花费了约220 .text()
毫秒,花费了约30毫秒。
第一个示例实际上将HTML嵌入,div
而第二个示例通过将与元素相关的字符替换为其相应的字符实体来转义文本,从而使其按字面显示(即,不显示 HTML )。
.text()
函数中,所有都<
将替换为<
。因此,.html()
在浏览器中将看到链接和一些粗体文本,.text()
在浏览器中将一切都显示为文本,而不是链接或粗体文本。
实际上,两者看上去确实有些相似,但有很大不同,这取决于您的使用或意图要实现的目标,
.html()
对具有html元素的容器进行操作。.text()
修改通常具有单独的开始和结束标签的元素的文本.text()
方法不能在表单输入或脚本上使用。
.val()
用于输入或textarea元素。.html()
用于脚本元素的值。从中获取html内容.text()
会将html标签转换为html实体。
.text()
可以在XML和HTML文档中使用。.html()
仅用于html文档。在jsfiddle上检查此示例以了解操作上的差异
当您打算将值显示为简单文本时,请使用.text(…)。
当您打算将值显示为html格式的文本(或HTML内容)时,请使用.html(…)。
如果不确定文本(例如,来自输入控件的文本)不包含在HTML中具有特殊含义的字符/标签,则绝对应使用.text(...)。这真的很重要,因为这可能导致文本无法正确显示,但也可能导致激活不需要的JS脚本片段(例如,来自其他用户输入的片段)。
基本上,$(“#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).
$('。div')。html(val)将设置所有选定元素的HTML值,$('。div')。text(val)将设置所有选定元素的文本值。
我猜想它们分别对应于Node#textContent和Element#innerHTML。(Gecko DOM参考)。
简单来说。
html()-获取内部html(html标签和文本)。
text()-仅在内部出现时获取文本(仅文本)
区别在于将其.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/
.text()
将为您提供HTML标记之间的实际文本。例如,段落文本在p
标签之间。值得注意的是,它将为您提供与$
选择器一起定位的元素中的所有文本以及该选定元素的子元素中的所有文本。因此,如果您p
在body元素内有多个带有文本的标签,并且执行了$(body).text()
,您将从所有段落中获取所有文本。(仅文本,而不是p
标签本身。)
.html()
将为您提供文字和标签。因此,$(body).html()
基本上可以为您提供整个页面的HTML页面
.val()
适用于具有value
属性的元素,例如input
。一个input
没有包含文本或HTML,因此.text()
和.html()
都将是null
对input
元素。
text()
方法会更快?多少?