Проблема с DOM в IE

Question

Интересно, не поддерживает ли IE метод DOM при создании таблицы в содержащем элементе-div. Потому что я не мог видеть таблицу при визуализации JavaScript. Пожалуйста, смотрите следующее:

В HTML:

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

В JavaScript:

Я создал DIV с именем "классификации". Тогда у меня есть два суб-div.

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

Кроме того, у меня есть одна таблица в номер 2. Проблема состоит в том, что DIV число 2 и его ребенок стол не виден на экране.

Любое решение, пожалуйста?

Вот код: предположим, что «классификации» уже определены.

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

Тот факт, что вы дали эти дивы идентификаторами, и что эти идентификаторы включают в себя слово «класс», предполагает, что ваш CSS может быть частью проблемы. Но так как вы не размещали CSS, это немного сложно понять.

EDIT: ОК, теперь вы отправили код. Это является немного длиннее. Как для вас, так и для нас, вы должны попытаться найти наименьший возможный пример, который воспроизводит проблему, которую вы пытаетесь решить.

Например, вы предположили, что IE не позволяет добавлять таблицу в DOM через JavaScript. Но вот какой-то 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 установить идентификатор элементов. В некоторых браузерах, и я думаю, что IE один, это не работает. Попробуйте просто сделать

elem.id = <id> 

и посмотрите, поможет ли это.