如何動態填充HTML頁面上的列表

Question

在問這個問題之前，我探索瞭如何將元素動態添加到列表中的現有答案，並將其中的幾個納入了我的解決方案，以滿足我的需求。但是，似乎該列表從未被填充。我在想這個問題可能與訪問列表來追加元素有關，但我不完全確定。

我的HTML：

<div class="row" id="row"> 
<div class="col-sm-4" id="faculty"> 
    <h3> Faculty Decks </h3> 
    <ul id="faculty_list"> </ul> 
</div> 
<div class="col-sm-4"> 
    <h3> Instructions </h3> 
    <p> Select your decks, select front (questions) or back (answers) of the the card and start studying. </p> 
<div> 
    <input class="front" type="radio" name="card" id="front" value="Front"> Front &ensp;</input> 
    <input class="back" type="radio" name="card" id="back" value="Back"> Back</input> 
    <br /> 
    <br /> 
    <button> Start Studying </button> 
</div> 
</div> 
<div class="col-sm-4" id="student"> 
    <h3> Student Decks </h3> 
    <ul id="student_list"> </ul> 
</div> 

我別的調用JavaScript函數，其中在HTML文件中，我已經證實，該函數被調用，參數是我所期望的，並且循環運行相應的次數。

這是我的javascript功能：

function populateLists(json) { 
    for (var i = 0; i < json.length; i++){ 
     //Create a new list element 
     var list_item = document.createElement('li'); 
     list_item.setAttribute('name', json[i].name); 

     //Create the checkbox to add to the list element 
     var select_checkbox = document.createElement('input'); 
     select_checkbox.type = 'checkbox'; 
     select_checkbox.id = json[i].deck_ID; 

     //Add the checkbox to the list element 
     list_item.appendChild(select_checkbox); 

     var list = document.getElementById('row').getElementById((json[i].faculty=='1')?'faculty':'student' + '_list'); 

     list.append(list_item); 
    } 
} 

Answer 1

在這裏你去！

var json={'a': 'First', 'b': 'Second', 'c': 'Third'}; 
 
function makeUL(json) { 
 
    // Create the list element: 
 
    var list = document.createElement('ul'); 
 

 
    for(var i = 0; i < Object.keys(json).length; i++) { 
 
     // Create the list item: 
 
     var item = document.createElement('li'); 
 

 
     // Set its contents: 
 
     item.appendChild(document.createTextNode(Object.values(json)[i])); 
 

 
     // Add it to the list: 
 
     list.appendChild(item); 
 
    } 
 

 
    // Finally, return the constructed list: 
 
    return list; 
 
} 
 

 
// Add the contents of json to #foo: 
 
document.getElementById('foo').appendChild(makeUL(json));

<div id="foo"></div>

Answer 2

它看起來就像是沒有找到合適的名單。我遇到了無法鏈接getElementById調用的錯誤，因此我改用了queryselector。爲了便於閱讀，我還列出了名單。

function populateLists(json) { 
 
for (var i = 0; i < json.length; i++){ 
 
    //Create a new list element 
 
    var list_item = document.createElement('li'); 
 
    list_item.setAttribute('name', json[i].name); 
 
    
 

 
    //Create the checkbox to add to the list element 
 
    var select_checkbox = document.createElement('input'); 
 
    select_checkbox.type = 'checkbox'; 
 
    select_checkbox.id = json[i].deck_ID; 
 

 
    //Add the checkbox to the list element 
 
    list_item.appendChild(select_checkbox); 
 
    
 

 
    var list_name = (json[i].faculty=='1')?'faculty':'student' + '_list'; 
 
    var list = document.querySelector('#row #' + list_name); 
 

 
    list.append(list_item); 
 
} 
 
} 
 

 
var data = [{"name": "abcd", "deck_ID": "a123","faculty":'1'},{"name": "bcde", "deck_ID": "a123","faculty":'1'},{"name": "cdef", "deck_ID": "a123","faculty":'1'}]; 
 
populateLists(data);

<div class="row" id="row"> 
 
<div class="col-sm-4" id="faculty"> 
 
    <h3> Faculty Decks </h3> 
 
    <ul id="faculty_list"> </ul> 
 
</div> 
 
<div class="col-sm-4"> 
 
    <h3> Instructions </h3> 
 
    <p> Select your decks, select front (questions) or back (answers) of the the card and start studying. </p> 
 
<div> 
 
    <input class="front" type="radio" name="card" id="front" value="Front"> Front &ensp;</input> 
 
    <input class="back" type="radio" name="card" id="back" value="Back"> Back</input> 
 
    <br /> 
 
    <br /> 
 
    <button> Start Studying </button> 
 
</div> 
 
</div> 
 
<div class="col-sm-4" id="student"> 
 
    <h3> Student Decks </h3> 
 
    <ul id="student_list"> </ul> 
 
</div>

Answer 3

我會做這樣沒有Object.keys：

var dataObj ={'a': 'First', 'b': 'Second', 'c': 'Third'}; 
 
function createUL(json) { 
 
    /* Create the list element: */ 
 
    var list = document.createElement('ul'); 
 

 
    for (var key in dataObj) { 
 
     /* Create the list item: */ 
 
     var item = document.createElement('li'); 
 

 
     /* Set its contents: */ 
 
     item.appendChild(document.createTextNode(dataObj[key])); 
 

 
     /* Add it to the list: */ 
 
     list.appendChild(item); 
 
    } 
 

 
    /* Return the constructed list: */ 
 
    return list; 
 
} 
 

 
/* Add the contents of dataObj to #bar: */ 
 
document.getElementById('bar').appendChild(createUL(dataObj));

<div id="bar"></div>

Answer 4

這裏的工作的例子，但我猜你會想在複選框中添加一些文字（用輕鬆完成標籤）。我編寫了一個JSON對象作爲示例;要使用此代碼，只需刪除該對象並將您的JSON對象傳入populateLists()即可。

一些變化我做：

• 刪除了鏈接.getElementById電話
• 改變.append()到.appendChild()
• 添加了onclick屬性爲Start Studying按鈕
• 添加缺少的</div>標籤

var json = [ 
 
    {name: "Person1", 
 
    deck_ID: "Deck1", 
 
    faculty: "1" 
 
    }, 
 
    {name: "Person2", 
 
    deck_ID: "Deck2", 
 
    faculty: "1" 
 
    }, 
 
    {name: "Person3", 
 
    deck_ID: "Deck3", 
 
    faculty: "1" 
 
    } 
 
]; 
 

 
function populateLists() { 
 
    for (var i = 0; i < json.length; i++){ 
 
     //Create a new list element 
 
     var list_item = document.createElement('li'); 
 
     list_item.setAttribute('name', json[i].name); 
 

 
     //Create the checkbox to add to the list element 
 
     var select_checkbox = document.createElement('input'); 
 
     select_checkbox.type = 'checkbox'; 
 
     select_checkbox.id = json[i].deck_ID; 
 

 
     //Add the checkbox to the list element 
 
     list_item.appendChild(select_checkbox); 
 

 
     var list = document.getElementById((json[i].faculty=='1')?'faculty':'student' + '_list'); 
 

 
     list.appendChild(list_item); 
 
    } 
 
}

<div class="row" id="row"> 
 
<div class="col-sm-4" id="faculty"> 
 
    <h3> Faculty Decks </h3> 
 
    <ul id="faculty_list"> </ul> 
 
</div> 
 
<div class="col-sm-4"> 
 
    <h3> Instructions </h3> 
 
    <p> Select your decks, select front (questions) or back (answers) of the the card and start studying. </p> 
 
<div> 
 
    <input class="front" type="radio" name="card" id="front" value="Front"> Front &ensp;</input> 
 
    <input class="back" type="radio" name="card" id="back" value="Back"> Back</input> 
 
    <br /> 
 
    <br /> 
 
    <button onclick="populateLists();"> Start Studying </button> 
 
</div> 
 
</div> 
 
<div class="col-sm-4" id="student"> 
 
    <h3> Student Decks </h3> 
 
    <ul id="student_list"> </ul> 
 
</div> 
 
</div>