Foreach Loop To Insert Name In Div Inside Li Tag

Hi, I'm new to JavaScript. I want to display array names in separate div tag inside li. So far I have managed to get array list to display one below another in single div & li

Solution 1:

Just add every li in a div and append it to the document in every iteration.

var elements = ['rock', 'paper','scissor'];
  
  demoP = document.getElementById("demo");
  elements.forEach(function(item, index) {
  
  newlistitem = document.createElement("li"); 
  newdiv = document.createElement("div");
  newdiv.setAttribute("style", "border: 5px solid black;");
  newdiv.setAttribute("id", "div_demo");
	
  newdiv.innerHTML = "index[" + index + "]: " + item + "<br>";
  
  demoP.appendChild(newlistitem);
  newlistitem.appendChild(newdiv);

});

<ul><pid="demo"></p></ul>

Hope this helps!!

Solution 2:

Try this.

<ul id="navp">
    </ul>

var mainList = document.getElementById("navp");

Loop the list with your array

elements.forEach(function(item, index) {
        var elem = document.createElement("li");
        elem.innerHTML = "<div>"+item+"</div>";
        mainList.appendChild(elem);
    });

Solution 3:

you have already have the answer, just change your markup when adding the div

note: i have styled the div to make it more visible

var elements = ['rock', 'paper','scissor'];
	demoP = document.getElementById("demo");
	
	elements.forEach(function(item, index) {
		demoP.innerHTML = demoP.innerHTML + "<div>index[" + index + "]: " + item + "</div>";
	});

#demodiv{
   border: 1px solid #f00;
   margin: 10px;
}

<ul><li><divstyle="border: 5px solid black;"id="div_demo"><pid="demo"></p></div></li></ul>