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>

您好，

我是JavaScript的新手。我想在li 中的单独 div标签中显示数组名称。到目前为止，我已经设法获得数组列表，在单个div和＆amp;李。我想在li 中单独的 div中显示每个名称。

Answer 1

只需在div中添加每个li，并在每次迭代中将其附加到文档中。

＆＃13;

  

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);

});

＆＃13;

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

＆＃13;

希望这会有所帮助!!

Answer 2

试试这个。

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

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

使用数组循环列表

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

Answer 3

您已经有了答案，只需在添加div时更改标记

注意：我设计了div以使其更加明显

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

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

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

forEach循环在li标签内的div中插入名称

3 个答案: