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

时间：2009-12-15 22:13:34

标签： jquery dom

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>');

17 个答案:

答案 0 :(得分：337)

我认为差异几乎是不言自明的。测试它是非常重要的。

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()的文档中：

  

XML文档中没有.html()方法。

在.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/

上的现场演示

答案 1 :(得分：104)

（（如有必要，请更新，这个答案是维基））

子问题：何时只有文字，什么更快，.text()或.html()？

答案： .html()更快！请参阅here a "behaviour test-kit" for all the question。

因此，总而言之，如果您只有“文字”，请使用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并且更快（！）。

请参阅this complete benchmark：

// 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());

答案 2 :(得分：64)

第一个示例实际上将HTML嵌入div中，而第二个示例将通过使用相应的character entities替换与元素相关的字符来转义文本，以便按字面显示（即HTML）将显示未呈现。）

答案 3 :(得分：55)

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>

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

答案 4 :(得分：26)

实际上两者看起来有些相似但却完全不同，这取决于你的用法或用途你想达到的目标，

何处使用：

  • 使用.html()操作具有html元素的容器。
  • 使用.text()修改通常具有单独open和 关闭标签

不使用的地方：

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

    • .val()表示输入或textarea元素。
    • .html()表示脚本元素的值。

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

差：

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

在jsfiddle上查看此示例以查看操作中的差异

Example

答案 5 :(得分：9)

奇怪的是，没有人提到.text()超过.html()的跨站点脚本预防权益（尽管其他人刚才提到.text()逃脱了数据）。

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

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

答案 6 :(得分：5)

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

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

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

答案 7 :(得分：2)

基本上，$（“＃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).

答案 8 :(得分：2)

嗯，简单来说。

html（） - 获取内部html（html标签和文本）。

text（） - 仅获取文本（仅限文本）

答案 9 :(得分：1)

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

API docs for jQuery.text()

API docs for jQuery.html()

我猜它们分别对应Node#textContent和Element#innerHTML。 （Gecko DOM引用）。

答案 10 :(得分：1)

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

.html()将为您提供文本和标签。因此$(body).html()基本上可以为您提供整个页面的HTML页面

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

答案 11 :(得分：0)

我认为不同之处在于插入html标签 在text()中你的html标签不起作用

$('#output').html('You are registered'+'<br>'  +'  '
                     + 'Mister'+'  ' + name+'   ' + sourname ); }

输出：

You are registered <br> Mister name sourname

将text()替换为html()

输出

You are registered
Mister name sourname

然后标记<br>适用于html()

答案 12 :(得分：0)

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

六年后这对我来说是一个虚假的答案，不要介意。

答案 13 :(得分：0)

不同之处在于.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/

答案 14 :(得分：0)

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

});

答案 15 :(得分：0)

尽可能使用 .text()，因为它会转义 HTML，尤其是当您添加任何不受信任的数据（例如来自用户输入）时。 .html() 有一些 xss 漏洞

答案 16 :(得分：-2)

def first_print():
    text ="Filter the df"
    text_output = tk.Label(window, text=text)
    text_output.grid(row=0, column=1, padx = 50)
    text = tk.Label(window,text=Filtered_df,font=('monospace',11)) #font=(family,size)
    text.grid(row=1,column=1)

text（）–此方法设置或返回所选元素的文本内容。 html（）–此方法设置或返回所选元素的内容。 请在此处参考示例：https://www.tutorialspoint.com/online_jquery_editor.php

相关问题
最新问题