数组元素未显示在动态创建的 div 中？答案

【问题标题】：Array elements not showing in dynamically created div?数组元素未显示在动态创建的 div 中？
【发布时间】：2017-03-23 09:49:12
【问题描述】：

我试图在动态创建的div 中使用 html li 元素打印数组元素，但没有显示错误，而且数组元素都不是空的div。

可能出了什么问题？

这是我的代码：

var fruitsName, fruitsLists, numFruits, i;

fruitsName = ["Mango", "Apple", "Banana", "Strawberry", "Blackberry", "Blueberry"];
numFruits = fruitsName.length;
fruitsLists = "<ul>";

for (i = 0; i < numFruits.length; i++)
{
    fruitsLists = "<li>" + fruitsName[i] + "</li>";
}
fruitsLists += "</ul>";
var myDiv = document.createElement('div');
myDiv.className = 'bookmarksHolder';
myDiv.id = 'randomItem';

document.getElementById('bookmarks_row').appendChild(myDiv);
document.getElementById('randomItem').innerHTML = fruitsLists;

【问题讨论】：

我忘了说我对编程和 stackoverflow 也很陌生，所以我希望不要投反对票。

标签： javascript html

【解决方案1】：

两个问题：numFruits 已经是一个数组长度，所以应该只是i < numFruits。其次，在循环中将前一个值与当前值连接起来：

for (i = 0; i < numFruits; i++) {
  fruitsLists += "<li>" + fruitsName[i] + "</li>";
}

完整示例：

var fruitsName, fruitsLists, numFruits, i;

fruitsName = ["Mango", "Apple", "Banana", "Strawberry", "Blackberry", "Blueberry"];
numFruits = fruitsName.length;
fruitsLists = "<ul>";

for (i = 0; i < numFruits; i++) {
  fruitsLists += "<li>" + fruitsName[i] + "</li>";
}
fruitsLists += "</ul>";

var myDiv = document.createElement('div');
myDiv.className = 'bookmarksHolder';
myDiv.id = 'randomItem';

document.getElementById('bookmarks_row').appendChild(myDiv);
document.getElementById('randomItem').innerHTML = fruitsLists;

&lt;div id="bookmarks_row"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

您在循环中分配给fruitsLists，而不是追加。你的数组长度也是numFruits，所以不要调用.length。将循环更改为：

for (i = 0; i < numFruits; i++)
{
    fruitsLists += "<li>" + fruitsName[i] + "</li>";
}

您还可以在将 div 附加到 DOM 之前将 ul 作为 innerHTML 提供给 div。这将只调用一次渲染引擎，而不是两次，并且您不必通过 ID 找到 div：

var myDiv = document.createElement('div');
myDiv.className = 'bookmarksHolder';
myDiv.id = 'randomItem';
myDiv.innerHTML = fruitsLists;

document.getElementById('bookmarks_row').appendChild(myDiv);

【讨论】：

【解决方案3】：

在循环中，您需要连接而不是更新整个值，否则fruitsLists 包含最后生成的 li 的 HTML。虽然更新了 for 循环条件，因为 numFruits 持有长度。

for (i = 0; i < numFruits; i++)
//             ---------^^^---
{
    fruitsLists += "<li>" + fruitsName[i] + "</li>";
    //      ---^^^---
}

【讨论】：