javascript - Create an HTML list from JSON - Stack Overflow

admin管理员组

文章数量:1334394

I have an array of objects:

I have a 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);                                 
}

I would like to have a result like this:

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

I have an array of objects:

I have a 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);                                 
}

I would like to have a result like this:

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

• javascript
• html

Share Improve this question Follow edited Nov 2, 2016 at 13:12 Nhan 3,90566 gold badges3434 silver badges4040 bronze badges asked Nov 2, 2016 at 11:27 Diego CespedesDiego Cespedes 1,35344 gold badges2626 silver badges5050 bronze badges 1

• .appendChild() adds a Node to an element. But data.list[i].puntata (in li.appendChild(data.list[i].puntata);) isn't a Node but a string. You could use .createTextNode() to convert the string to a Node which can then be added with .appendChild() – Andreas Commented Nov 2, 2016 at 11:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You should do as follows:

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

Try this

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

  var li=document.createElement('li');
  var textnode = document.createTextNode(data.list[i].puntata);    
  li.appendChild(textnode);
  ul.appendChild(li);                                 
}

本文标签： javascriptCreate an HTML list from JSONStack Overflow