起因

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

  1. jQuery中的text()、html()和val()以及innerText、innerHTML和value

    *jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...

  2. Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

  3. JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)

    window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...

  4. innerText与innerHTML的区别

    innerText与innerHTML的区别:1.innerText将所有文本内容作为普通的文本2.innerHTML会识别文本内容中是否含有html标签,它能够把html标签的效果显示出来3.inn ...

  5. 从零开始学 Web 之 DOM(三)innerText与innerHTML、自定义属性

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  6. javascript总结37:DOM:innerText 和 innerHTML

    innerText 和 innerHTML 作用: 给双标签的元素设置内容/获取双标签里面的内容 不同点: innerText 只是用于获取文本或设置文本 innerHTML 不仅可以用于设置/获取文 ...

  7. jQuery中的text()、html()和val()以及javaScript中的innerText、innerHTML和value

    *jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...

  8. JQuery中 text()、html() 以及 val()以及innerText、innerHTML和value

    设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容( ...

  9. jQuery中怎么添加innerText、innerHtml(转)

    发现如果我在div或者其他非表单的标签中赋值,原本用普通的js就直接document.getElementById("id").innerHtml(或者其他几个)就可以了. 但是在 ...

  10. innertext与innerhtml

    <div id="test"> <span style="color:red">test1</span> test2 < ...

随机推荐

  1. MySQL中limit与max同时使用时查询为空的情况

    一般情况下使用limit进行分页时通常是第一页就用max和min这些函数去求值,这样的情况是正常的,但是如果limit去到了第二页的时候发现这样用是不行的,原因未知! 修改的方式如下,适合大部分: , ...

  2. eclipse代码不能自动提示的问题解决

    步骤如下:window->Preferences->Java->Editor->content assist 替换输入成: 普通:[.abcdefghijklmnopqrstu ...

  3. CreateJS结合Falsh工具生成Canvas动画(加密字符串的由来)

    CreateJS是一款制作Canvas动画的工具. 官网如下: http://www.createjs.com/ http://www.createjs.cc/ 使用CreateJS时最大的疑问就是J ...

  4. binary-tree-maximum-path-sum——二叉树任意一条路径上的最大值

    Given a binary tree, find the maximum path sum. The path may start and end at any node in the tree. ...

  5. 定义自己的代码风格CheckStyle简单使用

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE module PUBLIC "-/ ...

  6. 函数式编程( Functional)与命令式编程( Imperative)对比

    1.函数式编程带来的好处 函数式编程近些年异军突起,又重新回到了人们的视线,并得到蓬勃发展.总结起来,无外乎如下好处: 1.减少了可变量(Immutable Variable)的声明,程序更为安全.  ...

  7. Num 34 : HDOJ : 1205 吃糖果 [ 狄利克雷抽屉原理 ]

           抽屉原理:          桌上有十个苹果,要把这十个苹果放到九个抽屉里,不管如何放,我们会发现至少会有一个抽屉里面至少放两个苹果.          这一现象就是我们所说的" ...

  8. canvas 五角星之回顾【初中三角函数】

    当程序中遇到三角函数的时候我是懵逼的,于是百度了“初中三角函数”, 忘了这几个公式的,自己打脸. 目的是通过Canvas画一个五角星, 突破口:只要能通过给定的两个外圈点的半径,和内圈点的半径,借助上 ...

  9. Ubuntu Server 12.04 乱码

    sudo vim /etc/default/locale 将 下面的内容修改 LANG="zh_CN.UTF-8" LANGUAGE="zh_CN:zh" 修改 ...

  10. ubuntu 单网卡双 ip

    局域网一套物理网络里有两个 ip 段,单网卡设置多 ip 可实现同时访问两个网段. $ cat /etc/network/interfaces # interfaces(5) file used by ...