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

当前回答

实际上,两者看起来有点相似,但却有很大的不同,这取决于你的用法或你想要达到的目的,

使用地点:

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

不使用的地方:

.text()方法不能用于表单输入或脚本。 .val()用于输入或文本区域元素。 .html()表示脚本元素的值。 从.text()中获取html内容将把html标记转换为html实体。

的区别:

.text()可以在XML和HTML文档中使用。 . HTML()仅用于HTML文档。

检查jsfiddle上的这个示例,以查看操作上的差异

例子

其他回答

.text()将为您提供HTML标记之间的实际文本。例如,p标记之间的段落文本。值得注意的是,它将为您提供使用$选择器所瞄准的元素中的所有文本,以及所选元素的子元素中的所有文本。如果你在body元素中有多个带有文本的p标签,你执行$(body).text(),你将获得所有段落的所有文本。(只有文本,而不是p标签本身。)

.html()将为您提供文本和标记。$(body).html()会给你整个HTML页面

.val()适用于具有value属性的元素,例如input。 输入不包含文本或HTML,因此.text()和. HTML()对于输入元素都将为空。

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

这对我来说是个愚蠢的答案,别介意。

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

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

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

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/