何时在元素上使用 jQuery .html 或 .text

Question

在我发布（并得到答复）的this question 中，我发现了如何正确地将文本框的值分配给标签的值。答案是使用任一

$('#txtBranchName').val($('#lblBranchName').html());

或

$('#txtBranchName').val($('#lblBranchName').text());

一个比另一个更可取吗？是否存在性能差异，或者一种方法不起作用但另一种方法在特定情况下会起作用？

Answer 1

设置数据

.text("<b>Test</b>") 将转义任何 HTML 标记（呈现 <b>Test</b>）

.html("<b>Test</b>") 会将它们呈现为实际的 HTML 元素（呈现 Test）。

读取数据

.text() 将只返回文本节点（剥离标签）

.html() 将返回包含标签的实际 HTML 字符串。

---

这是一个JSFiddle，它显示了两种方式的区别。

Answer 2

参考：What is the difference between jQuery: text() and html() ? 和 Differences between .text() and .html() with escaped < and > characters

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

在哪里使用：

• 使用 .html() 对具有 html 元素的容器进行操作。
• 使用 .text() 修改通常具有单独的开始和结束标签的元素的文本

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

与 .html() 方法不同，.text() 可以在 XML 和 HTML 中使用 文件。 .text() 方法的结果是一个包含 所有匹配元素的组合文本。 （由于 HTML 的变化 不同浏览器中的解析器，返回的文本可能会在换行符中有所不同 和其他空白。）

Answer 3

如果标签没有 HTML 子标签，那么无论哪种方式都是一样的，但是如果有任何标签（例如红色的“必需”标记），最好使用.text()，这样你就可以得到那个标记而不是生成它的 HTML。