動態生成沒有document.write的列表？

Question

我正在使用JavaScript來創建來自文本源的鏈接列表。使用document.write（），重置/創建一個不希望的新頁面。我不知道列表中的項目數量，因此預先組合一個列表並使用innerHTML來設置值似乎不「可行」？如何在JS中生成動態列表？

Answer 1

您可以使用document.createElement動態創建元素。它例如可以這樣工作的：

var container = document.getElementById('my-list'), 
    items = [], 
    addItem; 

addItem = function (text) { 
    var elm = document.createElement('li'); 

    elm.innerHTML = text; 
    container.appendChild(elm); 
    items.push(elm); 
}; 

// generating random list 
var i = 0, 
    j = Math.floor(Math.random() * 50); 

for (i; i < j; i++) { 
    addItem('list item ' + i); 
} 

Answer 2

由於馬蒂Mehtonen說，你可以使用document.createElement()，以便動態創建元素。有一點需要注意，不是直接將新創建的元素附加到DOMnode中，而應該創建一個文檔片段並將元素附加到DOMnode中，然後將片段追加到DOMnode中。這樣的過程會更快。

var items = ['cars', 'toys', 'food', 'apparel']; 

function render(elementId, list) { 
    //getting the list holder by id 
    var el = document.getElementById(elementId); 

    //creating a new document fragment 
    var frag = new DocumentFragment(); 

    //iterate over the list and create a new node for 
    //each list item and append it to the fragment 
    for (var i = 0, l = list.lenght; i < l; i++) { 
    var item = document.createElement('span'); 
    frag.appendChild(item.innerHTML = list[i]); 
    } 

    //finally append the fragment to the list holder 
    el.appendChild(frag); 
} 

//rendering 
render("my-list-holder", list);