innerText和innerHTML

起因

由于公司的项目以前不考虑浏览器的兼容性问题，当时只考虑ie8浏览器，封装的控件也只针对ie8，我后面的做的时候，也就针对ie8，最近发现，封装的日期控件，在firefox竟然没法显示出来，去看JavaScript代码，才发现原来是用innerText获取的td的内容，这样在文本框获取日期的时候，一个也不会显示出来

innerText和innertHTML区别

1.innerText是IE4.0出的，不是所有浏览器都可以用的如firefox;而innerHTML是所有浏览器都可以用

<!--通过选中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>

 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则不会

 <div id="test">

        <span style="color: red">Hello</span>  World!

 </div>

 //innerText

 window.onload = function () {

    var text = document.getElementById("test").innerText;

    alert(text); //ie、chrome、opera 显示 Hello World! firefox依然显示 undefined

 }

 //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

最新文章

热门文章