innerText和innerHTML

起因

    由于公司的项目以前不考虑浏览器的兼容性问题,当时只考虑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

innerText和innerHTML

上一篇:php处理行业分类数据


下一篇:Android的Service的初接触