Creating, populating, and appending a div

Question

I have an div in my HTML body titled recipeContainer. I am trying to use an API to search for recipes based on keywords from the user. Originally, I had 6 divs in an HTML that were populated in my javascript and styled in CSS, but that is no longer an efficient solution I think.

Here is my current code in the attempt to transfer functionality into each recipe's tile being created entirely in 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);
}

This is the loop executed whenever a user hits submit. I actually have two questions pertaining to this, firstly, I expected this code to create 5 200px x 350px gray tiles in my recipeContainer div, but nothing appears. What am I missing?

Secondly, when it comes to appending info from my API call(such as recipe name, food image, etc.), how would I go about appending to my selected div? Could I just declare a variable(ex. foodImg) getting that information from my JSON data, and do div.appendChild(foodImg) , as well as contain all the styling of the element I'm trying to add, inside of the javascript?

first thing, `document.createElement("div"+i)` is not creating a valid HTML element. May I know why are you appending `i` to "div"? — Omkar76, Mar 25 '21 at 13:46
Does this answer your question? [document.createElement('div') with a class](https://stackoverflow.com/questions/55224589/document-createelementdiv-with-a-class) — Mr T, Mar 25 '21 at 13:48
Also, the styling should probably just be in CSS with a `.class` as a selector, then you only have to add `div.className = 'MyClass'`. Otherwise, it might also be better to, after receiving your data, use something like `div.innerHTML = \`
${Title}\``, using a combo of innerHTML and template strings to populate your contents. — somethinghere, Mar 25 '21 at 13:49
@Omkar76, I wanted to give each div a different ID, I think thats just leftover concepts from using 6 divs in my HTML. The answer provided clarified my confusion. — necrokami, Mar 25 '21 at 14:16

score 1 · Accepted Answer · answered Mar 25 '21 at 13:47

You are probably not creating a div at all since you are creating something with an html tag , and so on.

If you want to assign each div an id:

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

will do the trick.

See a fiddle:

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>

Thanks for informing me about setAttribute. If my understanding is correct, anything in .createElement besides the html would "break" it? So I use setAttribute instead to set id's and anything like that. — necrokami, Mar 25 '21 at 14:13
inside createElement you should put only the name of the html tag you are creating (div, p and so on). The attributes are to be added later in the code — Lelio Faieta, Mar 25 '21 at 14:15

Creating, populating, and appending a div

${Title}\``, using a combo of innerHTML and template strings to populate your contents.

1 Answers1