JavaScript在HTML列表的开头追加新数组[重复]

Question

我有一个像下面这样的对象：

var data = [
  {item_name: 'Book', stock: 15},
  {item_name: 'Pencil', stock: 15},
  {item_name: 'Paper', stock: 3}
];

然后我从对象生成一个带有 HTML 的列表：

console.log(data);
var html = '';
for (var i = 0; i < data.length; i++) {
    html += '<li class="list-group-item" id="listGroup">'+data[i].item_name+'<span class="badge">'+data[i].stock+'</span></li>';
}
$('#listItem').html(html);

如果我添加新对象，我如何将新对象放在列表的开头？

Answer 1

像这样尝试。unshift() 方法将新项目添加到数组的开头。使用forEach() 循环数组。

var data = [
  {item_name: 'Book', stock: 15},
  {item_name: 'Pencil', stock: 15},
  {item_name: 'Paper', stock: 3}
];
data.unshift( {item_name: 'new', stock: 10});
//console.log(data);
var html='';
data.forEach(function(element,index,array){
    html += '<li class="list-group-item" id="listGroup">'+data[index].item_name+'<span class="badge">'+data[index].stock+'</span></li>';
$('#listItem').html(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="listItem">

</div>

JS FIDDLE https://jsfiddle.net/b1sf7a1d/