jquery的元素的文本内容与HTML内容操作的区别

一 应用

获取和设置元素的文本内容与HTML内容

二 代码

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
应用text()方法设置的内容
<div id="div1">
	<span id="clock">当前时间：2011-07-06 星期三 13:20:10</span>
</div>
<br />应用html()方法设置的内容
<div id="div2">
	<span id="clock">当前时间：2011-07-06 星期三 13:20:10</span>
</div>
<script type="text/javascript">
   $(document).ready(function(){
            $("#div1").text("<span style='color:#FF0000'>我是通过text()方法设置的HTML内容</span>");
            $("#div2").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");
            alert("通过text()方法获取：\r\n"+$("div").text()+"\r\n通过html()方法获取：\r\n"+$("div").html());
   });
</script>

 

三 运行效果

 

四 运行分析

1、在应用text()设置文本内容时，即使内容中包含HTML代码，也将被认为是普通文本，并不能作为HTML代码被浏览器解析，而应用html()设置的HTML内容中包括的HTML代码就可以被浏览器解析。

2、应用text()方法获取文本内容时，将获取全部匹配元素中包含的文本内容，而应用html()方法获取HTML内容时，则只获取第一个匹配元素中包含的HTML内容。