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

  • 相关阅读:
    容器适配器
    告别格式工厂的视频格式转换方法(mac版 命令行)
    配置CentOS7的网络为固定IP
    Java 多线程学习--线程池
    Java多线程学习--[转]
    使用VLC接收RTP流并时时播放(RTP流是pcma包)
    [转载好文]Linux下编写 makefile 详细教程
    [转载]简明 VIM 练级攻略
    linux删除不了文件, 修改文件属性也删除不了的一个解决思路
    SHELL脚本“syntax error: unexpected end of file”解决方案[半原创]
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1668582.html
Copyright © 2011-2022 走看看