jQuery: text()和html()有什么区别?

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>');
177893 次浏览
小开

第一个例子实际上将HTML嵌入到div中，而第二个例子将转义文本，方法是将与元素相关的字符替换为相应的字符实体，以便字面上显示(即HTML将是显示不呈现)。

小开

我认为这种差异是不言而喻的。测试起来非常简单。

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>
现场演示http://jsfiddle.net/hossain/sUTVg/

小开

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>

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

小开

基本上，$("#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)将设置所有选定元素的文本值。

API docs for jQuery.text() . txt (

API docs for jQuery.html() .html(

我猜它们分别对应于节点# textContent和元素# innerHTML。(Gecko DOM参考)。

小开

实际上，两者看起来有点相似，但却有很大的不同，这取决于你的用法或你想要达到的目的，

使用地点:

  • 使用.html()操作包含html元素的容器。
  • 使用.text()来修改通常具有单独的open和 李结束标记< / >

不使用的地方:

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

    • .val()用于输入或textarea元素。
    • .html()为脚本元素的值。
      • 李< / ul > < / >

    • 从.text()中获取html内容将html标记转换为html实体。

    的区别:

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

    检查jsfiddle上的这个示例，以查看操作上的差异

    < a href = " http://jsfiddle.net/7H8rM/ " > < / >示例

小开

我认为区别是插入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()中工作

小开

当您打算将值显示为简单文本时，请使用.text(…)。

当您打算将值显示为html格式的文本(或html内容)时，使用.html(…)。

你绝对应该使用.text(…)当你不确定你的文本(例如来自输入控件)不包含在HTML中有特殊意义的字符/标签。这很重要，因为这可能导致文本不能正常显示，但它也可能导致一个不需要的JS脚本片段(例如来自其他用户输入)被激活。

小开

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

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

答: .html()更快!看到这里有一个“行为测试工具包”;对于所有的问题。

因此，总结，如果你只有“一个文本”，使用html()方法。

注意:没有意义吗?记住，.html()函数只是.innerHTML的包装器，但在.text()函数中，jQuery添加了“实体filter"，这个过滤器自然会消耗时间。

< p >好的,如果你真的想要性能……使用纯Javascript来访问由nodeValue属性直接替换的文本。 基准测试结论:< / p >
  • jQuery的.html()比.text()快2倍。
  • pure JS的.innerHTML比.html()快3倍。
  • pure 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()的跨站点脚本防御优势(尽管其他人刚刚提到了.text()转义数据)。

当你想要更新DOM中的数据时，总是建议使用.text()，这只是用户可以看到的数据/文本。

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

小开

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

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

小开

简单来说。

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

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

小开
不同的是.html() evaluate as a html， .text() evaluate as a text。< br > 考虑一个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标记之间的段落文本。值得注意的是，它将为你提供你的$选择器所瞄准的元素中的所有文本，以及所选元素的子元素中的所有文本。因此，如果你在body元素中有多个带有文本的p标记，并且你执行$(body).text()，你将从所有段落中获得所有文本。(只有文本，而不是p标签本身。)

.html()将给你文本而且标签。所以$(body).html()基本上会给你整个HTML页面

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

小开 
**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();


});
小开 
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

小开

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


提交答案