小心inneHTML的地雷

大家都喜欢用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("你踩雷了！");
        }

当我们把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;

这样就解决了firefox的情况！

posted on 2010-02-15 15:50 司徒正美阅读(3083) 评论(13) 编辑收藏举报

刷新页面返回顶部

Ruby's Louvre

导航

公告

小心inneHTML的地雷