Question

我尝试在动态创建的li中使用html div元素打印数组元素，但没有显示错误，且两个数组元素都只是空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;

Answer 1

两个问题：<md-dialog-content> <span [innerHtml]='test'></span> </md-dialog-content>已经是数组的长度，所以应该只是numFruits。其次，in循环将前一个值与当前值连接：

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;

Answer 2

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

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

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

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

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

Answer 3

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

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

数组元素没有显示在动态创建的div中？

3 个答案: