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的更多相关文章
- jQuery中的text()、html()和val()以及innerText、innerHTML和value
*jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...
- Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...
- JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)
window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...
- innerText与innerHTML的区别
innerText与innerHTML的区别:1.innerText将所有文本内容作为普通的文本2.innerHTML会识别文本内容中是否含有html标签,它能够把html标签的效果显示出来3.inn ...
- 从零开始学 Web 之 DOM(三)innerText与innerHTML、自定义属性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- javascript总结37:DOM:innerText 和 innerHTML
innerText 和 innerHTML 作用: 给双标签的元素设置内容/获取双标签里面的内容 不同点: innerText 只是用于获取文本或设置文本 innerHTML 不仅可以用于设置/获取文 ...
- jQuery中的text()、html()和val()以及javaScript中的innerText、innerHTML和value
*jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...
- JQuery中 text()、html() 以及 val()以及innerText、innerHTML和value
设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容( ...
- jQuery中怎么添加innerText、innerHtml(转)
发现如果我在div或者其他非表单的标签中赋值,原本用普通的js就直接document.getElementById("id").innerHtml(或者其他几个)就可以了. 但是在 ...
- innertext与innerhtml
<div id="test"> <span style="color:red">test1</span> test2 < ...
随机推荐
- MySQL中limit与max同时使用时查询为空的情况
一般情况下使用limit进行分页时通常是第一页就用max和min这些函数去求值,这样的情况是正常的,但是如果limit去到了第二页的时候发现这样用是不行的,原因未知! 修改的方式如下,适合大部分: , ...
- eclipse代码不能自动提示的问题解决
步骤如下:window->Preferences->Java->Editor->content assist 替换输入成: 普通:[.abcdefghijklmnopqrstu ...
- CreateJS结合Falsh工具生成Canvas动画(加密字符串的由来)
CreateJS是一款制作Canvas动画的工具. 官网如下: http://www.createjs.com/ http://www.createjs.cc/ 使用CreateJS时最大的疑问就是J ...
- 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. ...
- 定义自己的代码风格CheckStyle简单使用
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE module PUBLIC "-/ ...
- 函数式编程( Functional)与命令式编程( Imperative)对比
1.函数式编程带来的好处 函数式编程近些年异军突起,又重新回到了人们的视线,并得到蓬勃发展.总结起来,无外乎如下好处: 1.减少了可变量(Immutable Variable)的声明,程序更为安全. ...
- Num 34 : HDOJ : 1205 吃糖果 [ 狄利克雷抽屉原理 ]
抽屉原理: 桌上有十个苹果,要把这十个苹果放到九个抽屉里,不管如何放,我们会发现至少会有一个抽屉里面至少放两个苹果. 这一现象就是我们所说的" ...
- canvas 五角星之回顾【初中三角函数】
当程序中遇到三角函数的时候我是懵逼的,于是百度了“初中三角函数”, 忘了这几个公式的,自己打脸. 目的是通过Canvas画一个五角星, 突破口:只要能通过给定的两个外圈点的半径,和内圈点的半径,借助上 ...
- Ubuntu Server 12.04 乱码
sudo vim /etc/default/locale 将 下面的内容修改 LANG="zh_CN.UTF-8" LANGUAGE="zh_CN:zh" 修改 ...
- ubuntu 单网卡双 ip
局域网一套物理网络里有两个 ip 段,单网卡设置多 ip 可实现同时访问两个网段. $ cat /etc/network/interfaces # interfaces(5) file used by ...