0

我的 HTML 正文中有一个名为 recipeContainer 的 div。我正在尝试使用 API 根据用户的关键字搜索食谱。最初，我在一个 HTML 中有 6 个 div，这些 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);
}

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

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

4

1 回答 1

1

您可能根本没有创建 div，因为您正在创建带有 html 标签的东西，依此类推。

如果要为每个 div 分配一个 id：

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

会成功的。

看一个小提琴：

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>

于 2021-03-25T13:47:49.437 回答