html()跟text()这两个jQuery方法有什么区别

html()和text()这两个jQuery方法有什么区别

html()和text()这两个jQuery方法有什么区别:
标题中的两个方法是jQuery非常常用的两个方法，并且有时候作用似乎是一模一样的，其实这只是一种假象而已，下面结合实例来介绍一下他们的区别，首先看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
div { 
  width:150px; 
  height:30px; 
  line-height:30px; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".html").html("蚂蚁部落"); 
  $(".text").text("蚂蚁部落"); 
}) 
</script> 
</head> 
<body> 
<div class="html"></div> 
<div class="text"></div> 
</body> 
</html>

在上面的代码中，两个方法都可以激昂div中的内容设置为“蚂蚁部落”，好像作用是一模一样的。
再来看一段实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
div { 
  width:150px; 
  height:30px; 
  line-height:30px; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".html").html("<b>蚂蚁部落</b>"); 
  $(".text").text("<b>蚂蚁部落</b>"); 
}) 
</script> 
</head> 
<body> 
<div class="html"></div> 
<div class="text"></div> 
</body> 
</html>

在以上代码中就明显看出两个方法的不同点，html()方法可以像浏览器一样能够解析html代码，而text()方法只是将html代码作为普通的文本而已，这样它们之间的区别已经显而易见了。

原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0427/251.html

html()跟text()这两个jQuery方法有什么区别

相关推荐