将innerHTML作为UL返回

Question

我将我的对象作为粘贴在视图中的事物列表返回。 我想将它们分开列出。

我想念的是什么？

HTML

 <div id="myPlace">
 </div>

JavaScript的

  for (var i = 0; i < results.length; i++) {
    var place = results[i];
    console.log(place)
    document.getElementById("myPlace").innerHTML += place.name + " - " + place.vicinity 
  }
}

Answer 1

可以创建一个字符串并在末尾插入

var htmlStr = '<ul>';
for (var i = 0; i < results.length; i++) {
    var place = results[i];
    htmlStr += '<li>'+ place.name + " - " + place.vicinity +'</li>';
  }
htmlStr += '</ul>';

document.getElementById("myPlace").innerHTML = htmlStr;

Answer 2

您需要将代码更新为以下内容

for (var i = 0; i < results.length; i++) {
    var place = results[i];
    if (i == 0) {
       document.getElementById("myPlace").innerHTML = "<ul>"; // add ul tag for 1st item
    }
    document.getElementById("myPlace").innerHTML += "<li>" + place.name + " - " + place.vicinity + "</li>"; // add li for each item

    if(i == results.length -1) { // closing ul tag for last item
        document.getElementById("myPlace").innerHTML += "</ul>";
    }
  }

Answer 3

如果我无法正确理解您的问题，但是您想在ul-li标签上列出每个商品的名称和附近地区，请原谅我。 如果是这样，您可以这样做。

<div id="myPlace">
</div>

var results = [{"name": "name 1", "vicinity" : "vicinity 1"},
              {"name": "name 2", "vicinity" : "vicinity 2"},
              {"name": "name 3", "vicinity" : "vicinity 2"}];

for (var i = 0; i < results.length; i++) {

    var ul = '<ul>';
    ul += '<li>'+results[i].name+'</li>';
    ul += '<li>'+results[i].vicinity+'</li>';
    ul += '</ul>';
    document.getElementById("myPlace").innerHTML += ul;

  }

工作小提琴

Answer 4

如果我正确理解您的意见：

// Declare list outside the scope of the for loop.
var list = "<ul>";

for (var i = 0; i < results.length; i++) 
{
    var place = results[i];
    console.log(place)
    // Add the <li>name - vicinity</li> text
    list += "<li>" + place.name + " - " + place.vicinity + "</li>"; 
}
// Close the list.
list += "</ul>";
// Insert the new "list" data.
document.getElementById("myPlace").innerHTML += list;