Array elements not showing in dynamically created div?

Question

im trying to print array elements with html li element in a dynamically created div but no errors showing and neither array elements just an empty div.

What could be wrong?

Here is my code:

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;

i forgot to say im new to programming and stackoverflow as well, so i hope for no downvote. — Asad
– Asad, Commented Mar 23, 2017 at 9:50

dfsq · Accepted Answer · 2017-03-23 09:53:28Z

3

Two problems: numFruits is already a length of array, so should be just i < numFruits. Second, in loop concatenate previous value with the current:

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

Complete sample:

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;

<div id="bookmarks_row"></div>

answered Mar 23, 2017 at 9:53

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Konstantin Dinev · Accepted Answer · 2017-03-23 09:50:56Z

1

You are assigning to fruitsLists in the loop, instead of appending. Also your array length is numFruits, so don't call .length of that. Change your loop to:

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

You can also give the ul as innerHTML to the div prior to attaching the div to the DOM. This will invoke the rendering engine only once, instead of twice, and you wouldn't have to find the div by ID:

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

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

answered Mar 23, 2017 at 9:50

Konstantin Dinev

35k14 gold badges79 silver badges103 bronze badges

Comments

Pranav C Balan · Accepted Answer · 2017-03-23 10:19:03Z

0

Within the loop, you need to concatenate instead of updating entire value otherwise fruitsLists includes the last generated HTML of li. Although update the for loop condition since numFruits holds the length.

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

edited Mar 23, 2017 at 10:19

answered Mar 23, 2017 at 9:50

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Collectives™ on Stack Overflow

Array elements not showing in dynamically created div?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related