使用javascript和html构建产品的动态列表

我不想像下面的html页面那样手动输入每个产品的信息，而是希望为我的每一组数据动态构建

div

（每行3个）：pastryData、coffeeData

然后在每个图像上都有一个链接，当用户单击它时，它会将用户重定向到带有特定项目描述的产品页面

我有以下产品.html页面：

<div class="container">
    <div id="pastries">
        <h3>Pastries</h3>
        <div class="card">
            <img src="images/croissant.png" alt="croisant" style="width:100%">
            <p class="calories">200 calories</p>
            <p class="name">Croissant</p>
        </div>                  
    </div>

    <div id="coffee">                   
       <h3>Coffee</h3>
    </div>
</div>
...
<script src="js/products.js" type="text/javascript"></script>   
</body>

到目前为止，这就是我所拥有的一切，但我不确定如何真正做到这一点

products.css

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.calories {
  color: grey;
  font-size: 18px;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;  
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}

.card .left {
    float: left;
}

.card .name {
  color: brown;
  font-size: 24px;
}

---

我不会给你做家庭作业，但你需要研究字符串插值。ES6使使用模板字符串文字变得很容易，但我想您必须在学校使用ES5（因为您的示例代码不使用ES6）。
你可以从这里得到一些灵感：

理论上，你会：

• 创建一个接受插值（json值）的函数，并为单个json对象返回完全生成的html字符串。如果需要，可以使用简单的字符串连接
• 循环遍历javascript值数组，并为每个项调用函数。将每个项目返回的html连接到一个列表中
• 执行一次对DOM的回写操作（就像您在示例中所做的那样，例如使用

  innerHTML

  ）

  ---

  我不会给你做家庭作业，但你需要研究字符串插值。ES6使使用模板字符串文字变得很容易，但我想您必须在学校使用ES5（因为您的示例代码不使用ES6）。
  你可以从这里得到一些灵感：
  理论上，你会：
  • 创建一个接受插值（json值）的函数，并为单个json对象返回完全生成的html字符串。如果需要，可以使用简单的字符串连接
  • 循环遍历javascript值数组，并为每个项调用函数。将每个项目返回的html连接到一个列表中
  • 执行一次对DOM的回写操作（就像您在示例中所做的那样，例如使用

    innerHTML

    ）

    ---

  我不会直接给出答案，但会尝试清楚地说明您可以自己解决问题的方法
  在开始之前，你需要了解的事情很少。每个元素都是一个dom节点。您想在哪里渲染什么项目基本上取决于您。假设你有一个ul元素。你会怎么做

  const brandsContainer=document.querySelector（“#brands”）；
  const brands=['foo'，'bar']；
  

  您已经访问了它。现在需要做的是动态创建元素并将其推回到dom节点
  怎么做
  您需要对每个元素进行循环并附加它们

  brands.forEach（品牌=>{
  const brandListItem=document.createElement（'li'）
  //现在您必须更新到元素的文本；
  brandListItem.innerHTML=品牌；
  //将其推送到先前查询的节点
  brandsContainer.appendChild（brandListItem）
  ))
  

  ---

  我不会直接给出答案，但会尝试清楚地说明您可以自己做这件事的方式
  在继续之前，您需要了解的事情很少。每个元素都是一个dom节点。您想在其中呈现什么项目基本上取决于您。假设您有一个ul元素。您将如何做到这一点

  const brandsContainer=document.querySelector（“#brands”）；
  const brands=['foo'，'bar']；
  

  您已经访问了它。现在您需要做的是动态创建元素并将其推回到dom节点
  怎么做
  您需要对每个元素进行循环并附加它们

  brands.forEach（品牌=>{
  const brandListItem=document.createElement（'li'）
  //现在您必须更新到元素的文本；
  brandListItem.innerHTML=品牌；
  //将其推送到先前查询的节点
  brandsContainer.appendChild（brandListItem）
  ))
  

  ---

  对于这样的简单渲染，您通常会使用轻量级模板渲染引擎，如@Trace这是我的家庭作业，因此我必须手动完成。克隆.card并将其乘以h3糕点之后的所有糕点和h3咖啡之后的所有咖啡的相关值。顺便说一句，您的coffeeData中存在语法错误。每个图像字段末尾都有额外的花括号。@Ozan是的，谢谢你。我注意到，当我调试页面进行这样的简单渲染时，你通常会使用一个轻量级的模板渲染引擎，比如@Trace，这是我的作业，所以我必须手工完成。克隆.card并将它乘以h3糕点之后的所有糕点和所有coh3咖啡后的ffee与相关值。顺便说一句，您的coffeeData中有语法错误。每个图像字段末尾都有额外的大括号。@Ozan是的，谢谢。我在调试页面时注意到这里没有JSON。是的，我显然只是引用了对象数组。@Trace很棒的建议。感谢您，它正常工作了。有这里没有JSON。是的，我只是引用了对象数组。@Trace很好的建议。多亏了你，它才得以工作。

  .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
    font-family: arial;
  }
  
  .calories {
    color: grey;
    font-size: 18px;
  }
  
  .card button {
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;  
    font-size: 18px;
  }
  
  .card button:hover {
    opacity: 0.7;
  }
  
  .card .left {
      float: left;
  }
  
  .card .name {
    color: brown;
    font-size: 24px;
  }