16 .innerHTML与innerText区别

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 6 <title>innerHTML与innerText区别</title>
 7     <script type="text/javascript">
 8     
 9         function testInnerHTML(){
10         
11             var div1=document.getElementById("div1");
12         
13             //innerHTML是将后面的字符串当做HTML代码来执行
14             div1.innerHTML="<font color='red'>hello1</font>";
15             
16         }
17         
18         function testInnerText(){
19         
20             var div2=document.getElementById("div2");
21             
22             //innerText是将后面的字符串就当做是字符串，即使后面是html语句也当做字符串执行
23             //div2.innerText="<font color='red'>helllo2</font>"
24             
25             //textContent与innerText功能相似，但是innerText火狐浏览器不支持，textContent,IE浏览器不支持；textContent与innerText谷歌浏览器都支持
26             div2.textContent="<font color='red'>hello2</font>";
27         
28         }
29     
30     </script>
31 </head>
32 
33 <body>
34 
35     <input type="button" value="innerHTML" onclick="testInnerHTML()"/>
36     <div id="div1"></div>
37     <input type="button" value="innerText" onclick="testInnerText()"/>
38     <div id="div2"></div>
39 </body>
40 </html>