javascript - forEach loop to insert name in div inside li tag

Question

var elements = ['rock', 'paper', 'scissor'];
demoP = document.getElementById("demo");

elements.forEach(function(item, index) {
  demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>";
});

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

Answer 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>	
  <p id="demo"></p>
</ul>