如何將文件添加到div

Question

我有這個簡單的代碼。我需要將這個ul html列表添加到「my-div」，但是使用此代碼我無法添加它。任何想法有什麼不對？

可以使用jquery添加碎片嗎？

this.renderMenuTop = function() { 

     var menu, f, ul; 
     menu = ['menu-actuality', 'menu-archive', 'menu-pdf', 'menu-pictures']; 
     f = document.createDocumentFragment(); 
     ul = document.createElement('ul'); 
     for (var i = 0; i < menu.length; i++) { 
      var li = document.createElement('li') 
      li.id = menu[i]; 
      ul.appendChild(li); 
     }  
     document.getElementById("my-div").appendChild(f); 

     //$(this.elmMenuTop).append(f); 
    } 

Answer 1

你從來沒有把任何東西放在f。但爲什麼你甚至有一個文件片段？

this.renderMenuTop = function() { 
    var menu = ['menu-actuality', 'menu-archive', 'menu-pdf', 'menu-pictures']; 
    var ul = document.createElement('ul'); 
    for (var i = 0; i < menu.length; i++) { 
     var li = document.createElement('li') 
     li.id = menu[i]; 
     ul.appendChild(li); 
    } 
    document.getElementById("my-div").appendChild(ul); 

    //$(this.elmMenuTop).append(f); 
}; 

如果您需要將它追加到兩個不同的東西，文檔片段將無濟於事。

Answer 2

您從不向文檔片段添加任何元素。您for循環後補充一點：

f.appendChild(ul); 

另一種選擇是隻轉儲文件片段完全公正：

document.getElementById("my-div").appendChild(ul); 
//           ^^ Change from f to ul 

Answer 3

你在哪裏列表中添加的片段？您需要添加

f.appendChild(ul); 

將其添加到div之前。或者，只需將該列表直接添加到沒有該片段的div。

Answer 4

爲了回答你問題的第二部分，這也有可能使用jQuery：

this.renderMenuTop = function() { 
    var menu = ['menu-actuality', 'menu-archive', 'menu-pdf', 'menu-pictures']; 
    var $ul = $('<ul></ul>'); 
    for (var i = 0; i < menu.length; i++) { 
     $ul.append('<li>' + menu[i] + '</li>'); 
    } 
    $('#my-div').append($ul); 
}