Please how can I make this sub divs appear inside all the first divs dynamically (it appears only in the tenth div)

Question

Dynamic div manipulation
https://code.sololearn.com/WMkffVo6gl0T/?ref=app

Answer 1

I think the issue is related to the fact that you only create 7 subdivs. But you want to create 7 subdivs for each div? So you need to do the part from line 43 to 57 for each div anew.

Answer 2

If I understood correctly what you hope to accomplish, you'd need to more the subdiv for loop inside the for loop where you create the main divs.

Just don't forget to rename the iterator (and where it is used) in for loop for subdivs as something other than i so that your for loops don't get iterated incorrectly. Pretty common usage is using "j" as the inner iterator, but it doesn't really matter as iterator can be named anything.

for(var i = 1; i <= firstDivs; i++){
for(var i = 1; i <= subDivs; i++){
var div = document.createElement("div");

div.innerHTML = `subDiv${i}`;
div.id = `subDiv${i}`
div.className = `subDivs`
subDivsArray.push(div)
}

}

Answer 3

Hmm.. my answer was posted while I was trying to format the code and sadly there doesn't seem to be edit.. but yeah hopefully you get the idea even with that incorrectly formatted example. for subdivs go with for(var j = 1; j <= subDivs; j++) { //code } etc.

Sorry for messing that up, I have no idea why it got posted while I was typing it and if there is a way to edit it.. :/

Answer 4

With your code as is the callback function appendSubDiv(line 73) is now the cause of your current problem.
The outer loop is unnecessary and should be removed. In doing so you will also need to pass the index of subDivsArrayHost to the callback function.

const appendSubDiv = (e, a) => {

for(var p = 0; p < e.length; p++){
subDivsFragHost[a].appendChild(e[p])
}

}
The parameter a represents the current index or the current element.