why do the loop not writing expected output in the dom 15 times
I am trying to create an elemnt div 15 times with another div child
here is the code
for(let i=1;i<=15;i++){
let smalldiv=document.createElement("div").textContent=i;
let pr =document.createElement("div");
pr.textContent="product";
};
smalldiv.appendChild(pr);
let smalldiv=document.createElement("div").textContent=i;
doesn't set smalldiv to the DIV. When you write
let x = y = z;
it's equivalent to
y = z;
let x = y;
so you're setting smalldiv to the textContent that you assigned i to.
And even if you did set smalldiv to the DIV, you never append it to the DOM, so you wouldn't see the results.
Since you're appending pr to smalldiv after the loop, you're just appending the last pr. But that won't work either, because the scope of pr is the loop body, so you can't refer to it after the loop is done. You should append it inside the loop.
Don't use a DIV for numbered items, use an ordered list <ol>, with <li> elements within it.
let ol = document.createElement("ol");
for(let i=1;i<=15;i++){
let pr =document.createElement("li");
pr.textContent="product";
ol.appendChild(pr);
};
document.body.appendChild(ol);First create the div smalldiv, then add the textContent. Then you need to append the elements to the DOM using an element already in the DOM or append to the document.body.
for(let i=1;i<=15;i++){
// create the div and assign the variable
let smalldiv=document.createElement("div");
// set the textContent once created
smalldiv.textContent = `${i}. `;
// create new div 'pr'
let pr = document.createElement("span");
// assign its content
pr.textContent="product";
// append pr to smalldiv
smalldiv.append(pr);
// append smalldiv to the body
document.body.append(smalldiv);
};