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

Javascript
JavaScript 自动完成脚本整理(33个)
7个Javascript地图脚本整理
JavaScript 事件记录使用说明
Javascript remove 自定义数组删除方法
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Jquery Ajax.ashx 高效分页实现代码
extjs 学习笔记 四 带分页的grid
javascript void(0)的妙用
用Javascript 编写可以缓慢弹出收缩的层
再谈ie和firefox下的document.all属性
JavaScript 常用函数库详解
JS 截取字符串substr 和 substring方法的区别
Domino中运用jQuery读取视图内容的方法
Js+CSS 文字渐隐渐现显示
Javascript 小写字母依次变为大写
JavaScript 炫彩的文字
javascript 洒脱飘动的文字
JavaScript 平滑文字闪烁
仿打字特效的JS逐字出现的信息文字
JavaScript数组应用 可依次读取的公告栏文字

Javascript 中的 javascript inneHTML的地雷


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-02-27   浏览: 66 ::
收藏到网摘: 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的情况!