Javascript Noob place array into innerHTML with elements separated by newline

Question

i am trying to place array into innerHTML but add a newline after each element,

var ingr_list = [];

//then i push some items

if (checkBox.checked == true){
    text.style.display = "none"; 
    ingr_list.push(nameofingredient);
    document.getElementById('ingredienttype').innerHTML = ingr_list;

As for now it just show array as entire line which ruins my responsiveness (the longer the array gets the wider screen grow which i do not know how to fix - \n or would do the trick)

Answer 1

Join the array elements with <br> tags like this:

var output = ingr_list.join('<br>');
document.getElementById('ingredienttype').innerHTML = output;