起因
由于公司的项目以前不考虑浏览器的兼容性问题，当时只考虑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
|
//innerTextwindow.onload = function
() {
var
text = document.getElementById("test").innerText;
alert(text); //ie、chrome、opera 显示 Hello World! firefox依然显示 undefined
} |
|
1
2
3
4
5
6
|
//innerHTMLwindow.onload = function
() {
var
html = document.getElementById("test").innerHTML;
alert(html); //ie、chrome、opera、firefox
//显示 <span style="color: red">Hello</span> World!
} |