forEach循環在li標簽內的div中插入名稱

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＆li中顯示在另一個下面。 我想在li內的單獨div中顯示每個名稱。

Answer 1

只需在div中添加每個li，然后在每次迭代中將其附加到文檔中即可。

 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> 

希望這可以幫助！！

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>