回顾一下，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("你踩雷了！"); } 强制在IE8模式下运行 by 司徒正美 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 当我们把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; 强制在IE8模式下运行 by 司徒正美 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 这样就解决了firefox的情况！

　　推荐阅读

　　jQuery 性能优化手册 推荐

在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下:总是从ID选择器开始继承 在class前使用tag 将jquery对象缓存起来 掌握强大的链式操作 使用子查询 对直接的DOM操作进行限制 冒泡 消除无效>>>详细阅读

本文标题：javascript inneHTML的地雷

地址：http://www.17bianji.com/kaifa2/JS/27037.html

 1/2    1