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的情况!

  • 相关阅读:
    蓝牙打印机的连接方法
    CE不能开机的可能情况
    手机性能指标的建议
    WINCE中使用键盘钩子的注意事项
    Wave接口开发注意事项
    解决唤醒屏不亮的问题之总结
    WM系统有用的注册表(研发人员使用)
    快速求解两个时间之间的天数
    测试SqlBulkCopy类批量插入数据
    Xml与DataTable相互转换方法
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1668582.html
Copyright © 2011-2022 走看看