创建、填充和追加div

Question

我在HTML正文中有一个名为RecipeContainer的div。我正在尝试使用一个API来根据用户的关键字搜索菜谱。最初，我在一个HTML中有6个DIV，它们被填充在我的javascript中，并使用CSS样式，但我认为这不再是一个有效的解决方案。

下面是我当前的代码，它试图将功能转移到完全在JS中创建的每个菜谱的平铺中：

for(i = 0; i < 5 ; i++){
    let div = document.createElement("div"+i);
    div.style.color = "gray";
    div.style.width = "200px";
    div.style.height = "350px";
    div.style.display = "flex";
    div.style.textAlign = "center";
    div.style.borderRadius = "15px";
    div.style.flexDirection = "column";
    document.getElementById("recipeContainer").appendChild(div);
}

这是每当用户点击Submit时执行的循环。实际上，我有两个问题与此相关，首先，我希望这段代码在我的recipeContainer div中创建5个200 px x 350px的灰色瓷砖，但什么也没有出现。我错过了什么？

其次，当涉及到从我的API调用中追加信息（例如食谱名称、食物图像等）时，我将如何追加到我选择的div中？我是否可以声明一个变量（如foodImg）从我的JSON数据中获取该信息，并在JavaScript内部执行div.appendChild(foodImg)，以及包含我试图添加的元素的所有样式？

Answer 1

您可能根本没有创建div，因为您正在创建带有html标记的东西，等等。

如果要为每个div分配ID：

let div = document.createElement('div');
div.setAttribute("id", "Div"+1);

会成功的。

只见小提琴：

null

for(i = 0; i < 5 ; i++){
    let div = document.createElement('div');
    div.setAttribute("id", "Div1");
    div.style.color = "gray";
    div.style.width = "200px";
    div.style.height = "350px";
    div.style.display = "flex";
    div.style.textAlign = "center";
    div.style.borderRadius = "15px";
    div.style.flexDirection = "column";
    console.log(div);
    document.getElementById("recipeContainer").appendChild(div);
}

<div id="recipeContainer"></div>