javascript - IE 中的 DOM 问题

Question

我想知道在包含元素的div中创建表格时IE是否不支持DOM方法。因为 JavaScript 渲染时我看不到表格。请参阅以下内容:

在 HTML 中:

<div id="pageHeader">
    <div id="filters">
       -----
    </div>
</div>

在 JavaScript 中:

我创建了一个名为“classifications”的 div。然后我有两个子 div。

1. <div id="titleClass">
2. <div id="namesClass">

另外，我在 2 号中有一张表。问题是 2 号 div 及其子表在屏幕上看不到。

请问有什么解决办法吗？

这是代码:假设“分类”已经定义。

function loading(){
    initClassifications();
}
function initClassifications() {
    if (classifications.length > 0) {
        var el = document.createElement("div");
        el.setAttribute("id", "classifications");

        ul1 = document.createElement("ul");
        startIndex1 = 0;
        var pageHeader = document.getElementById("pageHeader");
        var titleElement = document.createElement("span");
        var titleText = document.createTextNode("classifications");
        titleElement.appendChild(titleText);
        var lstElement = document.createElement("div");
        lstElement.setAttribute("id", "titleClass");
        lstElement.appendChild(titleElement);
        el.appendChild(lstElement); //add title to classifications
        var names = document.createElement("div"); // create div for classifications
        names.setAttribute("id", "namesClass");
        var tbl = document.createElement("table");
        var tr = document.createElement("tr");
        var td = document.createElement("td");        

        for (var i = 0 ; i < classifications.length && i< 10 ; i++) {                    
            var li = document.createElement("li");
            ul1.appendChild(li);
            names.appendChild(ul1);
            var link = document.createElement("a");
            link.setAttribute("href", classifications[i][0]);
            var name = document.createTextNode(classifications[i][1]);
            link.appendChild(name);
            li.appendChild(link);
            startIndex1++;
        }

        td.appendChild(ul1);
        tr.appendChild(td);
        if (startIndex1 < classifications.length) {
            var span = document.createElement("span");
            var link = document.createElement("a");
            link.setAttribute("href", "javascript:addClassifications();");
            var text = document.createTextNode("more...");
            link.appendChild(text);
            span.appendChild(link);

            moreClass = document.createElement("div"); //more div for moving
            moreClass.setAttribute("id", "moreClass");
            moreClass.appendChild(span);
            el.appendChild(moreClass);
            var td1 = document.createElement("td");            
            td1.setAttribute("valign", "bottom");            
            td1.appendChild(moreClass);
            tr.appendChild(td1);

        }
        tbl.appendChild(tr);
        el.appendChild(tbl);
        names.appendChild(tbl);
        el.appendChild(names);
        pageHeader.appendChild(el);
        var filter = document.getElementById("filters");
        pageHeader.insertBefore(el, filter); //insert listingnames before filters

    }

}
function addClassifications() {
    var maxIndex = startIndex1 + 10;
    for (var i = startIndex1; i < classifications.length && i<maxIndex; i++)
    {     
            var li = document.createElement("li");
            ul1.appendChild(li);
            var link = document.createElement("a");
            link.setAttribute("href", classifications[i][0]);
            var name = document.createTextNode(classifications[i][1]);
            link.appendChild(name)
            li.appendChild(link);
            startIndex1++;          
    }

   //if (startIndex1 >= classifications.length)
     //   $$("#moreClass").remove();
}

Answer 1

事实上，您已经给了这些 div id，并且这些 id 包含单词“Class”，这表明您的 CSS 可能是问题的一部分。但由于您没有发布 CSS，所以有点难以了解。

编辑:好的，现在您已经发布了代码。它有点长。为了您和我们的利益，您应该尝试找到尽可能最小的示例来重现您要解决的问题。

例如，您建议 IE 不允许您通过 JavaScript 将表添加到 DOM。但这里有一些我刚刚编写的 JavaScript，它确实向 DOM 添加了一个表。 (该表有一个单元格，其内容为 Foo!)因此您要解决的问题可能在其他地方。

<script>
  var div = document.createElement('div');
  div.id = 'classifications';

  var child1 = document.createElement('div');
  child1.id="titleClass";
  div.appendChild(child1);

  var child2 = document.createElement('div');
  child2.id="namesClass";
  div.appendChild(child2);
  child2.innerHTML = '<table border="1"><tr><td>Foo!</td></tr></table>';

  document.body.appendChild(div);

</script>

但我注意到的一件事是，您使用 setAttribute 来设置元素的 id。在某些浏览器中，我认为 IE 就是其中之一，这是行不通的。尝试做一下

   elem.id = <id>

看看是否有帮助。