起因
由于公司的项目以前不考虑浏览器的兼容性问题,当时只考虑ie8浏览器,封装的控件也只针对ie8,我后面的做的时候,也就针对ie8,最近发现,封装的日期控件,在firefox竟然没法显示出来,去看JavaScript代码,才发现原来是用innerText获取的td的内容,这样在文本框获取日期的时候,一个也不会显示出来
innerText和innertHTML区别
1.innerText是IE4.0出的,不是所有浏览器都可以用的如firefox;而innerHTML是所有浏览器都可以用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<!--通过选中checkbox获取对应label标签的内容--> <table class = "doc-table" > <tr> <td><strong>爱好:</strong></td> <td> <input type= "checkbox"
name= "ckb-love"
id= "ckbSing"
/> <label id= "lblSing"
for = "ckbSing" ><音乐></label> </td> </tr> <tr> <td colspan= "2" > <input type= "button"
id= "btnSubmit"
value= "提交"
/> </td> </tr> </table> |
1
2
3
4
5
6
7
8
9
10
11 |
window.onload = function
() { var
btnSubmit = document.getElementById( "btnSubmit" ); btnSubmit.onclick = function
() { var
ckbEmelents = document.getElementsByName( "ckb-love" ); //获取一组name为ckb-love的多选框 for
( var
i = 0; i < ckbEmelents.length; i++) { var
id = ckbEmelents[i].id; //拿到当前元素的id var
lblEmelent = document.getElementById(id.replace( "ckb" , "lbl" )); //将id进行替换,获取label的内容 alert(lblEmelent.innerText); //在ie、chrome、opera都能显示<音乐> 在firefox中则显示 undefined } } } |
2.innerText会html特殊符号进行编码处理,不用特殊符号,而innerHTML则不会
1
2
3 |
<div id= "test" > <span style= "color: red" >Hello</span> World! </div> |
1
2
3
4
5 |
//innerText window.onload = function
() { var
text = document.getElementById( "test" ).innerText; alert(text); //ie、chrome、opera 显示 Hello World! firefox依然显示 undefined } |
1
2
3
4
5
6 |
//innerHTML window.onload = function
() { var
html = document.getElementById( "test" ).innerHTML; alert(html); //ie、chrome、opera、firefox //显示 <span style="color: red">Hello</span> World! } |
innerText和innerHTML,布布扣,bubuko.com
原文地址:http://www.cnblogs.com/qq0827/p/3763850.html