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)

Derek Brown · Accepted Answer · 2018-02-26 06:42:20Z

3

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

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

edited Feb 26, 2018 at 6:42

Derek Brown

4,4575 gold badges30 silver badges44 bronze badges

answered Feb 26, 2018 at 6:29

Randy Casburn

14.2k1 gold badge19 silver badges32 bronze badges

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

1 Comment

Randy Casburn Over a year ago

@jdow - You are very welcome! Please accept my answer.

Collectives™ on Stack Overflow

Javascript Noob place array into innerHTML with elements separated by newline

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related