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>');
当前回答
我认为这种差异是不言而喻的。测试起来非常简单。
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/
其他回答
不同的是.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/
.text()将为您提供HTML标记之间的实际文本。例如,p标记之间的段落文本。值得注意的是,它将为您提供使用$选择器所瞄准的元素中的所有文本,以及所选元素的子元素中的所有文本。如果你在body元素中有多个带有文本的p标签,你执行$(body).text(),你将获得所有段落的所有文本。(只有文本,而不是p标签本身。)
.html()将为您提供文本和标记。$(body).html()会给你整个HTML页面
.val()适用于具有value属性的元素,例如input。 输入不包含文本或HTML,因此.text()和. HTML()对于输入元素都将为空。
基本上,$("#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).
我认为区别在于插入html标签 在text()中你的HTML标签没有函数
$('#output').html('You are registered'+'<br>' +' '
+ 'Mister'+' ' + name+' ' + sourname ); }
输出:
You are registered <br> Mister name sourname
用html()替换text()
输出
You are registered
Mister name sourname
那么标签<br>在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();
});