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

当前回答

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

jQuery.text()的API文档

jQuery.html()的API文档

我猜它们分别对应于node# textContent和Element#innerHTML。(Gecko DOM参考)。

其他回答

第一个例子实际上将HTML嵌入到div中,而第二个例子将转义文本,方法是将与元素相关的字符替换为相应的字符实体,以便按字面意思显示(即HTML将被显示而不呈现)。

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

});

不同的是.html()评估为html, .text()评估为文本。 考虑一个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/

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

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。当您想要插入对查看页面的人可见的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>

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