Javascript 如何为json数组中的每个对象重复div结构？

我有一个生成json数组的ASP.NET MVC应用程序。我知道如果我想在我的页面上显示以下Json：

[{"FruitId":1, "Name":"Apple", "Description":"Red Delicious"}]

我可以对HTML执行以下操作：

<div class="row">
    <div id="fruitName"></div>
    <div id="fruitId"></div>
    <span id="fruitDescription" class="test"></span>
</div>

---

假设我吃了不止一个

水果

。如何在javascript中循环HTML结构，以便为json数组中的每个水果显示或重复

div:row

结构？

您可以将包装器类作为

<div id="fruits-container">
</div>

现在，我们可以对数据进行循环，并为接收到的特定数据调用此函数

<div id="fruits-container">
</div>

function appendFruit(id, name, description ) {
    // create fruit div
    // add class to div
    // create children for Name, Id, Description
    // append element to fruitsContainer
}