当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript inneHTML的地雷

Javascript
在Z-Blog中运行代码[html][/html](纯JS版)
统一接口:为FireFox添加IE的方法和属性的js代码
网页自动刷新,不产生嗒嗒声的一个解决方法
驱动事件的addEvent.js代码
[原创]提供复制本站内容时出现,该文章转自IT学习网等字样的js代码
CSDN轮换广告图片轮换效果
一段多浏览器的"复制到剪贴板"javascript代码
Javascript中的常见排序算法
JS Common 2 之比较常用到的函数
非正则实现的只能输入汉字的输入框
CSDN上快速结贴的方法,JS实现
js eval木马代码,以后再分析吧
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
一个不错的可以检测多中浏览器的函数和其它功能
状态栏显示欢迎信息的脚本特效
关于文本限制字数的js代码
在你的网页中嵌入外部网页的方法
在IE中调用javascript打开Excel的代码(downmoon原作)
javascript实现动态增加删除表格行(兼容IE/FF)
javascript中获取选中对象的类型

Javascript 中的 javascript inneHTML的地雷


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-02-27   浏览: 321 ::
收藏到网摘: n/a

大家都喜欢用innerHTML添加内容,但是innerHTML这东西在两大阵营中有许多不同。 回顾一下,IE会把标签内前面的一些空白kill掉,还会把它里面标签统统大写,会显示动态添加的属性,在某些元素中,它还是只读的。这个由IE发明的东西,最后被爆如此多缺陷,真是令人心寒。不过innerHTML还有一地雷,存在于最标准的火狐中,看下面代码:
复制代码 代码如下:

var newTable = document.createElement('table');
document.body.appendChild(newTable);
var newTr = document.createElement('tr');
var rowContent = '<td>司徒正美 </td><td><em>RestlessDream</em></td>';
newTr.innerHTML = rowContent;
newTable.appendChild(newTr);
alert(newTable.innerHTML)
if (rowContent.toLowerCase() == newTr.innerHTML.toLowerCase()) {
alert("一定如我所愿!");
}else {
alert("你踩雷了!");
}


[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

当我们把innerHTML加入到tr节点时,它会被firefox解析成:
复制代码 代码如下:
司徒正美 <em>RestlessDream</em>

而不再是原来的:
复制代码 代码如下:
<td>司徒正美 </td><td><em>RestlessDream</em></td>

td标签被去掉了!我想是不是与加入DOM树的顺序有关,调整一下:
复制代码 代码如下:

var newTable = document.createElement('table');
document.body.appendChild(newTable);
var newTr = document.createElement('tr');
newTable.appendChild(newTr);
var rowContent = '<td>司徒正美 </td><td><em>RestlessDream</em></td>';
newTr.innerHTML = rowContent;


[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

这样就解决了firefox的情况!