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>');
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>');
当前回答
text()方法实体-转义传入它的任何HTML。当您想要插入对查看页面的人可见的HTML代码时,请使用text()。
从技术上讲,第二个示例生成:
<a href="example.html">Link</a><b>hello</b>
它将在浏览器中呈现为:
<a href="example.html">Link</a><b>hello</b>
您的第一个示例将呈现为一个实际的链接和一些粗体文本。
其他回答
奇怪的是,没有人提到.text()相对于.html()的跨站点脚本预防好处(尽管其他人刚刚提到。text()转义数据)。
当你想要更新DOM中的数据时,总是建议使用.text(),这只是用户可以看到的数据/文本。
. HTML()应该主要用于获取div中的HTML内容。
var v = "全名";
$("#div").html(v); //display as "全名"
$("#div").text(v); //display as "全名"
text()——该方法设置或返回所选元素的文本内容。 html()——该方法设置或返回所选元素的内容。 参考示例:https://www.tutorialspoint.com/online_jquery_editor.php
当您打算将值显示为简单文本时,请使用.text(…)。
当您打算将值显示为html格式的文本(或html内容)时,使用.html(…)。
当你不确定你的文本(例如来自输入控件)不包含在HTML中有特殊意义的字符/标记时,你一定要使用.text(…)。这是非常重要的,因为这可能会导致文本不能正常显示,但也可能导致不需要的JS脚本片段(例如来自另一个用户输入)被激活。
不同的是.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/
第一个例子实际上将HTML嵌入到div中,而第二个例子将转义文本,方法是将与元素相关的字符替换为相应的字符实体,以便按字面意思显示(即HTML将被显示而不呈现)。