关于dom：jQuery：text（）和html（）有什么区别？


What is the difference between jQuery: text() and html() ?

jquery中的text()和html()函数有什么区别？

1
$("#div").html('Linkhello');

VS

1
$("#div").text('Linkhello');
相关讨论

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

jQuery.html()将字符串视为HTML，jQuery.text()将内容视为文本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
  Test Page
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  <script type="text/javascript">
    $(function(){
      $("#div1").html('Linkhello');
      $("#div2").text('Linkhello');
    });
 
</head>

<body>




</body>
</html>

jquery api文档中描述了一个可能不太明显的差异。

在.html()的文档中：

The .html() method is not available in XML documents.

在.text()的文档中：

Unlike the .html() method, .text() can be used in both XML and HTML documents.

1
2
3
4
$(function() {
  $("#div1").html('Linkhello');
  $("#div2").text('Linkhello');
});
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">

http://jsfiddle.net/hossain/sutvgn上的实时演示/

相关讨论

(如有必要，请更新，此答案为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，速度更快！.

请参阅完整的基准：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 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):
html="+ht+"
text="+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):
innerHTML="+ht+"
nodeValue="+simplecron.duration());
相关讨论

第一个示例将实际在div中嵌入HTML，而第二个示例将通过用相应的字符实体替换与元素相关的字符来转义文本，使其按字面显示(即HTML将不显示)。

相关讨论

text()方法实体会转义传递给它的任何HTML。当您希望插入对查看页面的人可见的HTML代码时，请使用text()。

从技术上讲，您的第二个示例产生：

1
&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;b&gt;hello&lt;/b&gt;

在浏览器中呈现为：

4

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

相关讨论

事实上，两者看起来都有点相似，但有很大的不同，这取决于你的用法或意图，你想实现什么，

使用地点：

  • 使用.html()操作具有HTML元素的容器。
  • 使用.text()修改通常具有单独打开和结束标签

不使用地点：

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

    • 用于输入或文本区域元素的.val()。
    • 用于脚本元素的值。

  • 从.text()中提取HTML内容将把HTML标记转换为HTML实体。

差异：

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

在jsFiddle上检查这个示例，以查看操作上的差异。

例子

相关讨论

奇怪的是，没有人提到.text()相对于.html()的跨站点脚本保护好处(尽管其他人刚刚提到.text()会避开数据)。

当您想要更新dom中的数据时，总是建议使用.text()，这只是供用户查看的数据/文本。

.html()主要用于获取一个分区内的HTML内容。

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

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

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

简单来说。

html()--获取内部html(html标记和文本)。

text()--仅获取内部存在的文本(仅文本)

基本上，$(div").html使用element.innerhtml设置内容，而$(div").text(可能)使用element.textcontent。

http://docs.jquery.com/attributes/html：

1
Set the html contents of every matched element

http://docs.jquery.com/attributes/text:

1
2
Similar to html(), but escapes HTML (replace"<" and">" with their HTML
entities).

.text()将提供HTML标记之间的实际文本。例如，p标记之间的段落文本。值得注意的是，它将为您提供使用$选择器所针对的元素中的所有文本，以及该选定元素的子元素中的所有文本。因此，如果在body元素中有多个带有文本的p标记，并且执行$(body).text()，那么将从所有段落中获取所有文本。(仅文本，而不是p标记本身。)

.html()将为您提供文本和标签。所以$(body).html()基本上会给你整个页面的HTML页面

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

$('.div').html(val)将设置所有选定元素的HTML值，$('.div').text(val)将设置所有选定元素的文本值。

jquery.text()的API文档

jquery.html()的API文档

我猜它们分别对应于node textcontent和element innerhtml。(Gecko DOM引用)。

不同的是，.html()评估为HTML，.text()评估为文本。考虑HTML块HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    This is a div container
   
<ul>

     
<li>
Link 1
</li>

     
<li>
Link 2
</li>

   
</ul>

    a text after ul

JS

1
2
3
4
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/

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

六年后，这对我来说是个愚蠢的回答，别介意。

我认为区别在于插入HTML标记在text()中，HTML标记不起作用。

1
2
$('#output').html('You are registered'+''  +'  '
                     + 'Mister'+'  ' + name+'   ' + sourname ); }

输出：

1
You are registered  Mister name sourname

用html()代替text()。

输出

1
2
You are registered
Mister name sourname

那么，标签在html()中起作用。

相关讨论