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

text() 方法对传入其中的任何 HTML 进行实体转义。如果您要插入对页面查看者可见的 HTML 代码，请使用 text()。

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

<a href="example.html">Link</a><b>hello</b>

这将在浏览器中呈现为：

<a href="example.html">Link</a><b>hello</b>

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

---

实际上两者看起来确实有些相似，但完全不同，这取决于您的用途或您想要实现的意图，

在哪里使用：

使用 .html() 对具有 html 元素的容器进行操作。

使用 .text() 修改通常具有单独的开始和结束标签的元素的文本

不使用的地方：

.text() 方法不能用于表单输入或脚本。 .val() 用于输入或文本区域元素。 .html() 用于脚本元素的值。

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

.html() 用于脚本元素的值。

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

区别：

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

.html() 仅适用于 html 文档。

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

例子

---

奇怪的是，没有人提到 .text() 优于 .html() 的跨站点脚本预防优势（尽管其他人刚刚提到 .text() 会转义数据）。

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

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

---

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

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

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

---

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

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

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

---

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

API docs for jQuery.html()

我猜它们分别对应于 Node#textContent 和 Element#innerHTML。 （壁虎 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 标记，您的 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() 中有效

---

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

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

---

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

});

---

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

---

var v = "全名";
$("#div").html(v); //display as "全名"
$("#div").text(v); //display as "全名"

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

---