Problem with DOM in IE

Question

I wonder if IE doesn't support DOM method when creating a table in a containing element-div. Because I could not see the table when the JavaScript rendered. Please see the following:

In the HTML:

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

In the JavaScript:

I created a div named "classifications". Then I have two sub divs.

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

Also, I have one table in number 2. The problem is that div number 2 and its child-table is not seen on screen.

Any solution, please?

Here is the code: supposing that "classifications" is already defined.

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

The fact that you've given these divs ids, and that these ids include the word 'Class', suggests that your CSS might be part of the problem. But since you didn't post the CSS, it's a little hard to know.

EDIT: OK, now you've posted the code. It is a bit long. For your sake as well as ours, you should try to find the smallest possible example that reproduces the problem that you're trying to solve.

For example, you suggested that IE doesn't allow you to add a table to the DOM via JavaScript. But here's some JavaScript that I just hacked together that does add a table to the DOM. (The table has one cell, the content of which is Foo!) So the problem you're trying to solve is probably elsewhere.

<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>

One thing I noticed, though, is that you're using setAttribute to set the id of the elements. In some browsers, and I think IE is one, this doesn't work. Try just doing

   elem.id = <id>

and see if that helps.