¿Por qué el ciclo no escribe la salida esperada en el dom 15 veces?
Estoy tratando de crear un div elemnt 15 veces con otro div child
aquí está el código
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; no establece smalldiv en el DIV. Cuando escribes
let x = y = z;es equivalente a
y = z; let x = y; por lo que está configurando smalldiv en el contenido de textContent i le asignó.
E incluso si configuró smalldiv en DIV, nunca lo agrega al DOM, por lo que no verá los resultados.
Dado que está agregando pr a smalldiv después del ciclo, solo está agregando el último pr . Pero eso tampoco funcionará, porque el alcance de pr es el cuerpo del ciclo, por lo que no puede consultarlo después de que finaliza el ciclo. Debes agregarlo dentro del bucle.
No use un DIV para elementos numerados, use una lista ordenada <ol> , con elementos <li> dentro de ella.
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);Primero cree el div smalldiv, luego agregue textContent. Luego, debe agregar los elementos al DOM utilizando un elemento que ya está en el DOM o agregar al documento.cuerpo.
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); };