zoukankan      html  css  js  c++  java
  • 小心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的情况!

  • 相关阅读:
    10个优秀HTML5网站案例赏析
    读书笔记之:More Exceptional C++ (2002) [++]
    函数模板与函数重载
    vector中元素的删除
    C++常用程序
    Linux下的示例程序
    要求或禁止在堆中产生对象
    读书笔记之:Effective C++ (2005)[++]
    读书笔记之:More Effective C++ (2007)[+]
    读书笔记之:Essential C++ (2001)[+]
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1668582.html
Copyright © 2011-2022 走看看