html - How to get line break in javascript inside variable -

i have array:

var social = [  ["facebook",   "#link",    "#62b500", "images/facebook.png"],  ["instagram",  "#link",    "#62b500", "images/instagram.png"],  ["twitter",    "#link",    "#62b500", "images/twitter.png"]  ]; 

i want add line breaks or space/margin between icons @ positions.

the result should this:

facebook instagram ----linebreak/free space--- twitter ----linebreak/free space--- else else else 

my transformation-code far looks this:

$("#socialside").append('<ul class="mainul"></ul>');      /// generating bars     for(var i=0;i<social.length;i++){     $(".mainul").append("<li>" + '<ul class="scli" style="background-color:' + social[i][2] + '">' +                         '<li>' + social[i][0] + '<img src="' + social[i][3] + '"/></li></ul></li>');                     } 

what possibilities have add line-break/space? how can achieve in javascript?

i made one. enough? have create new loop each time want different spacing, atleast works me.

created loop end on 3 element. created same loop starting 3 4 element , added </br> @ beginning.

for(var i=0;i<3;i++){     $(".mainul").append("<li>" + '<ul class="scli" style="background-color:' + social[i][2] + '">' +                         '<li>' + social[i][0] + '<img src="' + social[i][3] + '"/></li></ul></li>');                      }       for(var i=3;i<4;i++){     $(".mainul").append("</br><li>" + '<ul class="scli" style="background-color:' + social[i][2] + '">' +                         '<li>' + social[i][0] + '<img src="' + social[i][3] + '"/></li></ul></li>');                     }