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

  • 相关阅读:
    mysql MHA报错 Can't exec "mysqlbinlog": No such file or directory at /usr/local/share/perl5/MHA/BinlogManager.pm line 99.
    树莓派搭建私人服务器
    动手写简单的嵌入式操作系统一
    java 返回json数据
    C语言中内存分配
    IntelliJ IDEA14.0.3+Maven+SpringMVC+Spring+Hibernate光速构建Java权限管理系统(三)
    linux设备驱动归纳总结
    阿里云centos6.5下搭建javaWeb运行环境
    JAVAWEB项目如何实现验证码
    Linux驱动开发:USB驱动之usb_skel分析
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1668582.html
Copyright © 2011-2022 走看看