起因

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

    最初 最近在开发应用时碰到使用ASIHttpRequest后在某些机器上发不出请求的问题,项目开启了ARC,代码是这样写的: @implement MainController - (void) fe ...

  2. Android 中的Canvas画图

    Android中有一个Canvas类,Canvas类就是表示一块画布,你可以在上面画你想画的东西.当然,你还可以设置画布的属性,如画布的颜色/尺寸等.Canvas提供了如下一些方法: Canvas() ...

  3. SilverLight-DataControls:四、The PagedCollectionView(分页的集合视图) 对象

    ylbtech-SilverLight-DataControls-PagedCollectionView:The PagedCollectionView(分页的集合视图) 对象 1.A, Buildi ...

  4. C中的继承和多态

    昨天同学面试被问到这个问题,很有水平,以前都没有遇到过这个问题,一时自己也不知道怎么回答. 网上学习了一下,记录以备后用! C/C++ Internals : 里面的问题都写的不错,可以读读! Ref ...

  5. 安装 - LNMP一键安装包

    https://lnmp.org/ 系统需求: CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian Linux系统 需要5GB以上硬盘剩余空间 需要128MB以上内存( ...

  6. chardet的使用

    http://blog.csdn.net/jy692405180/article/details/52496599

  7. react 调用 function 的写法 及 解决 react onClick 方法自动执行

    1.react 调用方法的写法 (1)方式一 onClick={this.getFetchData.bind(this,item.id)} (2)方式二 getFetchData(e){ this.s ...

  8. Populating Next Right Pointers in Each Node I, II——生成next树

    1. Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode * ...

  9. 设置安卓开机动画、开机logo

    我们要修改的是system>media文件夹下的bootanimation.zip(手机开机动画)这个文件 先来讲讲这个文件结构:该zip解压后得到两个文件, 第一个目录存放了开机时播放的图片( ...

  10. MyEclipse的实体关系设计

    原文地址:http://www.myeclipsecn.com/learningcenter/database-development/myeclipse-entity-relation-design ...