1、html() 和 text()
$(selector).html() 返回匹配元素的起始标签到结尾标签之间的HTML标记;和HTML中的innerHTML属性是一样的作用
$(selector).html(context) 匹配元素的起始标签和结尾标签之间的HTML标记被替换为context
$(selector).text() 返回匹配元素的起始标签到结尾标签之间的文本内容;
$(selector).text(context) 为所有的匹配元素设置文本内容
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="utf-8"/>
<title>innerHTMl/html(),text()区别</title>
</head>
<body>
<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table><br/>
<input type="button" οnclick="getInnerHTML()" value="innerHTML" />
<input type="button" class="btn1" value=".html()" />
<input type="button" class="btn2" value=".text()" />
<p id="p">ndfjskafskafjsk</p>
<script type="text/javascript">
function getInnerHTML()
{
alert(document.getElementById("tr1").innerHTML);//弹出
alert(document.getElementById("p").innerHTML);
}
$(".btn1").click(function(){
alert($("#tr1").html());
alert($("p").html());
});
$(".btn2").click(function(){
alert($("#tr1").text());
alert($("p").text());
});
</script>
</body>
</html>
结果:
点击innerHTML按钮弹出: <th>Firstname</th> 和 ndfjskafskafjsk
<th>Lastname</th>
点击.html()按钮弹出: <th>Firstname</th> 和 ndfjskafskafjsk
<th>Lastname</th>
点击.text()按钮弹出: Firstname 和 ndfjskafskafjsk
Lastname