CODEWITHSUNDEEP
javascripthtmlarraysfor-loop
Robbie
Robbie

Reputation: 75

Print every record of an array on the same page with Javascript

I have an array with a variable amount of records. And I want to print every record of the array in the same html page. I prefer it to display in a list.

I have the following code. However this does only print the last record of the array because it overwrites the previous record in my html ul-element.

for (var i = 0; i < feedbackGeenLid.length; i++)
{
document.getElementById("feedback").innerHTML= ("<li>"+feedbackGeenLid[i] + "</li>");
}

Does anyone have an idea on how to realize this?

Upvotes: 0

Views: 1685

Answers (2)

Headshota
Headshota

Reputation: 21449

you are rewriting the content in each loop. use a variable to concatenate the content and then put it in the element:

var html = '';
for (var i = 0; i < feedbackGeenLid.length; i++)
{
 html += "<li>"+feedbackGeenLid[i] + "</li>";
}

document.getElementById("feedback").innerHTML= html;

Upvotes: 1

epascarello
epascarello

Reputation: 207531

Your code keeps replacing the innerHTML you need to add to it.

document.getElementById("feedback").innerHTML += ("<li>"+feedbackGeenLid[i] + "</li>");
                                              ^
                                              |
                                              Added + here

For better performance build one string and set it to innerHTML at the end of the loop. 

var out = "";
for (var i = 0; i < feedbackGeenLid.length; i++)
{
  out += "<li>"+feedbackGeenLid[i] + "</li>";
}
document.getElementById("feedback").innerHTML= out;

Another option, use appendChild()

Upvotes: 3

Related Questions