Displaying Elements in Multiple Arrays

Question

I have data stored in multiple arrays. I want to be able to display the elements in each array on the page using innerHTML. The problem is is that each time through the for-loop the next element in the array overwrites the previous element. How do I display all elements at once without anything being overwritten? Here is my set up:

 for(var item in list){
 document.getElementById('results').innerHTML = "Results: " + item;
 }

So that might display the contents of the first array and then i'd create another loop to display contents of second array, etc. Is there a better way to display the contents of multiple arrays such that nothing overwrites previous content?

• adeneo: You could do .innerHTML += 'more results'
• Andy: Also, best not to use for...in loops for arrays. Reserve that loop for objects.

Answer 1

Edit your code to

for(var item in list){
 document.getElementById('results').innerHTML = "Results: ";
 document.getElementById('results').innerHTML = document.getElementById('results').innerHTML+ item;
 // Or same way to write it
 // document.getElementById('results').innerHTML += item;
}

• Mahmud Adam: This prints the items but it also repeats "Results" in between printed elements.