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

jQuery中的text()和html()函数有什么区别?

$("#div").html('<a href="example.html">Link</a><b>hello</b>');

$("#div").text('<a href="example.html">Link</a><b>hello</b>');

当前回答

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

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/

2009-12-15 22:19:46

其他回答

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

2009-12-15 22:23:50

尽可能使用.text()，因为它会转义HTML，特别是如果您正在添加任何不受信任的数据，例如来自用户输入。. HTML()有一些xss漏洞

2021-03-11 07:36:21

(如有必要请更新，这个答案是Wiki)

子问题:当只有文本时，.text()或.html()哪个更快?

答案:.html()更快!请看这里所有问题的“行为测试包”。

所以，总之，如果你只有“一个文本”，使用html()方法。

注:说不通吗?请记住，.html()函数只是. innerhtml的包装器，但在.text()函数中，jQuery添加了一个“实体过滤器”，这个过滤器自然会消耗时间。

好吧，如果你真的想要性能……使用纯Javascript访问nodeValue属性的直接文本替换。基准测试结论:

jQuery的.html()比.text()快2倍。纯JS的. innerhtml比.html()快3倍。纯JS的. nodevalue比.html()快50倍，比.text()快100倍，比. innerhtml快20倍。

PS: . textcontent属性是DOM-Level-3引入的，. nodevalue是DOM-Level-2并且更快(!)

查看完整的基准测试:

// Using jQuery:
simplecron.restart(); for (var i=1; i<3000; i++) 
    $("#work").html('BENCHMARK WORK');
var ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++) 
    $("#work").text('BENCHMARK WORK');
alert("JQuery (3000x): \nhtml="+ht+"\ntext="+simplecron.duration());

// Using pure JavaScript only:
simplecron.restart(); for (var i=1; i<3000; i++)
    document.getElementById('work').innerHTML = 'BENCHMARK WORK';
ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++) 
    document.getElementById('work').nodeValue = 'BENCHMARK WORK';
alert("Pure JS (3000x):\ninnerHTML="+ht+"\nnodeValue="+simplecron.duration());

2013-08-24 11:51:07

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

});

2020-06-29 12:07:51

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

2020-09-10 07:39:50

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

推荐文章

最新文章

标签