关于document.body.appendChild在ie6兼容问题

最新推荐文章于 2023-01-23 21:56:52 发布

allenlily

最新推荐文章于 2023-01-23 21:56:52 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： DOM javascript 文章标签： ie table button 百度 input 微软

本文链接：https://blog.youkuaiyun.com/allenlily/article/details/7292409

DOM 同时被 2 个专栏收录

4 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

本文介绍了一个在IE6浏览器中遇到的表格元素显示问题，即动态生成的内容无法正常显示，因为IE6默认添加了<TBODY>标签。文中提供了一种解决方法，通过手动添加<TBODY>标签并调整JavaScript代码来确保内容正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function inserText() {
            var urldata = {"百度":"http://www.baidu.com","谷歌":"http://www.google.com","微软":"http://www.microsoft.com"};
            var table = document.getElementById("btntable");
            for (var key in urldata) {
                var urlName = urldata[key];
                var tr1 = document.createElement("tr");
                var td1 = document.createElement("td");
                td1.innerText = key;
                tr1.appendChild(td1);

                var td2 = document.createElement("td");
                td2.innerHTML = "<a href='" + urlName + "'>" + urlName + "</a>";
                tr1.appendChild(td2);
                table.appendChild(tr1);
            }
        }

在IE6里通过DebugBar来观察,

<TABLE id=btntable>
<TBODY ></TBODY>
<TR>
<TD>百度</TD>
<TD><A href="http://www.baidu.com/">http://www.baidu.com</A></TD></TR>
<TR>
<TD>谷歌</TD>
<TD><A href="http://www.google.com/">http://www.google.com</A></TD></TR>
<TR>
<TD>微软</TD>
<TD><A href="http://www.microsoft.com/">http://www.microsoft.com</A></TD></TR></TABLE>

在IE6里多了<TBODY ></TBODY>这对标签,IE6默认显示<TBODY ></TBODY>里的内容,所以我们生成的内容不能显示

解决办法:

<body>
    <table id="btntable">
     <tbody id="td"></tbody>//自己动手添加这个标签
    </table>
    <input type="button" onclick="inserText()" value="插入内容"/>
</body>

function inserText() {
            var urldata = {"百度":"http://www.baidu.com","谷歌":"http://www.google.com","微软":"http://www.microsoft.com"};
            var tbody= document.getElementById("bt");//只要获得tbody元素
            for (var key in urldata) {
                var urlName = urldata[key];
                var tr1 = document.createElement("tr");
                var td1 = document.createElement("td");
                td1.innerText = key;
                tr1.appendChild(td1);

                var td2 = document.createElement("td");
                td2.innerHTML = "<a href='" + urlName + "'>" + urlName + "</a>";
                tr1.appendChild(td2);
                tbody.appendChild(tr1);//在tbody里添加tr1就大功告成..
            }
        }