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

  • 相关阅读:
    shell 数组遍历加引号和不加引号的区别?
    shell map数据结构的实现
    PyCharm 项目打开窗口设置为当前还是新开一个怎么办?
    python 模拟ssh 登录远程服务器
    python 字节码死磕
    docker相关内容
    Windows7安装 docker-compose的过程
    史上最简单的Docker入门教程
    MySQL触发器使用详解
    存储过程
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1668582.html
Copyright © 2011-2022 走看看