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

Question

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?

epascarello · Accepted Answer · 2013-06-17 13:27:04Z

3

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()

answered Jun 17, 2013 at 13:27

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

Comments

Headshota · Accepted Answer · 2013-06-17 13:27:58Z

1

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;

answered Jun 17, 2013 at 13:27

Headshota

21.4k13 gold badges63 silver badges82 bronze badges

1 Comment

Robbie Over a year ago

Thanks a lot. This method did the job as well.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related