innerText、innerHTML、value获取值的区别

•Value 获取表单元素的值(input 、textarea、等在form中的元素)
•几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。
             –<a href="http://www.itcast.cn" id="link1">传<font color="Red">智</font>播客</a>
            –<input type="button" value="inner*" onclick="alert(document.getElementById('link1').innerText);alert(document.getElementById('link1').innerHTML);" />
 
innerText、innerHTML属性的区别：
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 2 
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml" >
 5 <head>
 6     <title></title>
 7     <script type="text/javascript">
 8         function getLinkText() {
 9               //获取a标签之间的值
10             var link = document.getElementById("link1");
11            // 测试innerText和innerHTML 的区别：innerText显示的内容是"传智播客"，
12             //innerHTML 显示的是“传智<font color="red">播客</font>”
13             alert(link.innerText);
14             alert(link.innerHTML);
15         }
16                }
17     </script>
18 </head>
19 <body>
20     <a id="link1" href="http://www.itcast.cn">传智<font color="red">播客</font></a>
21     
22   </body>
23 </html>


•用innerHTML也可以替代createElement动态创建元素，属于简单、粗放型、后果自负的创建

–function createlink() {
–            var divMain = document.getElementById("divMain");
–            divMain.innerHTML = "<a href='http://www.rupeng.com'>如鹏网</a>";
–        }
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 2 
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml" >
 5 <head>
 6     <title></title>
 7     <script type="text/javascript">
 8                function setDiv() {
 9             //设置div中的值，不能用value，value只能设置表单元素的值
10             var div = document.getElementById("d1");
11              //页面显示内容为"<font color='red'>123123</font>"
12             //div.innerText = "<font color='red'>123123</font>";
13 
14             //页面显示内容为红色的"123123"
15             //div.innerHTML = "<font color='red'>123123</font>";
16             
17             //创建一个列表、文本框(动态创建元素的另一种方法，document.write也是一种方法，但是在标 签中不好，会覆盖原先内容)
20             //div.innerHTML = "<ul><li>春天里</li><li>怒放</li></ul>";
21             //div.innerHTML = "<input type='text' value='1234' />";
22 
//为了不覆盖以前div层的内容，先取出以前的内容，再追加
23             //div.innerText = div.innerText + "123123";
 24 
//另一种做法：创建一个文本节点
25             //Node节点 Element元素的区别：Node包含Element
26             //html文档里所有的内容都是节点 （ 标签 属性  文本）
27             //元素 ： 一个完整的标签
28 //            var txtNode = document.createTextNode("123123");
29             //            div.appendChild(txtNode);
30 
31             div.innerHTML = "<script type='text/javascript'>function test(){alert('hello')}<
32 
33 \/script>";
34         }
35     </script>
36 </head>
37 <body>
38       
39      <div id="d1">abcd</div>
40     
41     <input type="button" value="set div" onclick="setDiv() " />
42     
43         <input type="button" value="test" onclick="test()" />
44 </body>
45 </html>

 

 
posted @ 2013-03-24 11:51  Big.Eagle  阅读(724)  评论(0)    收藏  举报