如何动态填充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>