码迷,mamicode.com
首页 > Web开发 > 详细

17.innerHTML与innerText区别

时间:2017-11-21 23:48:44      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:div   type   4.0   extc   font   innertext   谷歌   col   div2   

 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>

 

17.innerHTML与innerText区别

标签:div   type   4.0   extc   font   innertext   谷歌   col   div2   

原文地址:http://www.cnblogs.com/xuzhiyuan/p/7875426.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!