javascript - 从 JSON 创建 HTML 列表

Question

我有一个对象数组:

我有一个div:

<div class="col-lg-12" id="list-puntate">
  <!-- Insert my list here -->                              
</div>

JS

var listDiv = document.getElementById('list-puntate');
var ul = document.createElement('ul');
ul.appendChild(listDiv);
for(var i = 0; i < data.list.length; ++i) {
  var li = document.createElement('li');
  li.appendChild(data.list[i].puntata);
  ul.appendChild(li);                                 
}

我想要这样的结果:

<div class="col-lg-12" id="list-puntate">
  <ul>
    <li>values of data.list[i].puntata</li>
    <li>...</li>
  </ul>                              
</div>

Answer 1

您应该执行以下操作:

var listDiv = document.getElementById('list-puntate');
var ul=document.createElement('ul');
for (var i = 0; i < data.list.length; ++i) {
      var li=document.createElement('li');
      li.innerHTML = data.list[i].puntata;   // Use innerHTML to set the text
      ul.appendChild(li);                                 
}
listDiv.appendChild(ul);    // Note here