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

当前回答

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

其他回答

基本上,$("#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).

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>

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

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

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文档中使用。

$(函数(){ $ (" # div1 ") . html(“< a href = " html”显示>链接< / > < b > < / b >你好'); $ (" # div2”)。文本(' < a href = " html”显示>链接< / > < b > < / b >你好'); }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js " > < /脚本> < div id = " div1 " > < / div > < div id = " div2 " > < / div > 现场演示http://jsfiddle.net/hossain/sUTVg/

奇怪的是,没有人提到.text()相对于.html()的跨站点脚本预防好处(尽管其他人刚刚提到。text()转义数据)。

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

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

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