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>