Problem mit DOM in IE

Question

Ich frage mich, ob IE DOM-Methode beim Erstellen einer Tabelle in einem enthaltenden Element-Div nicht unterstützt. Weil ich die Tabelle nicht sehen konnte, als das JavaScript gerendert wurde. Bitte beachten Sie folgendes:

Im HTML:

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

Im JavaScript:

Ich habe ein div namens "Klassifikationen". Dann habe ich zwei Subdivs.

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

Auch habe ich eine Tabelle in Nummer 2. Das Problem ist, dass div Nummer 2 und dessen Kind-Tabelle nicht auf dem Bildschirm zu sehen ist.

Irgendeine Lösung, bitte?

Hier ist der Code: angenommen, dass "Klassifikationen" bereits definiert ist.

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

Die Tatsache, dass Sie diese divs ids gegeben haben, und dass diese ids das Wort ‚Klasse‘ gehört, lassen vermuten, dass Ihre CSS Teil des Problems sein könnte. Aber da Sie das CSS nicht veröffentlicht haben, ist es etwas schwer zu wissen.

BEARBEITEN: OK, jetzt haben Sie den Code veröffentlicht. Es ist ein bisschen lang. Versuchen Sie, sowohl für Sie als auch für uns, das kleinste mögliche Beispiel zu finden, das das Problem reproduziert, das Sie zu lösen versuchen.

Zum Beispiel haben Sie vorgeschlagen, dass IE es Ihnen nicht erlaubt, dem DOM eine Tabelle über JavaScript hinzuzufügen. Aber hier ist etwas JavaScript, das ich gerade zusammengehackt habe, das dem DOM eine Tabelle hinzufügt. (Die Tabelle hat eine Zelle, deren Inhalt Foo! ist). Das Problem, das Sie zu lösen versuchen, ist wahrscheinlich woanders.

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

Eine Sache, die ich bemerkt, ist jedoch, dass Sie setAttribute verwenden die ID der Elemente einzustellen. In einigen Browsern, und ich denke, IE ist einer, funktioniert das nicht. Versuche es einfach

elem.id = <id> 

und sehen, ob das hilft.