title: How to get line break in javascript inside variable
body: <p>I have an array: </p>
  
  <pre><code>var social = [
   ["facebook",   "#link",    "#62b500", "images/facebook.png"],
   ["instagram",  "#link",    "#62b500", "images/instagram.png"],
   ["twitter",    "#link",    "#62b500", "images/twitter.png"]
   ];
  </code></pre>
  
  <p>I want to a add line breaks or space/margin between the icons at certain positions. </p>
  
  <p>The result should look like this:</p>
  
  <pre><code>Facebook
  Instagram
  ----linebreak/free space---
  twitter
  ----linebreak/free space---
  something else
  something else
  something else
  </code></pre>
  
  <p>My transformation-code so far looks like this: </p>
  
  <pre><code>$("#socialside").append('&lt;ul class="mainul"&gt;&lt;/ul&gt;');
  
      /// generating bars
      for(var i=0;i&lt;social.length;i++){
      $(".mainul").append("&lt;li&gt;" + '&lt;ul class="scli" style="background-color:' + social[i][2] + '"&gt;' +
                          '&lt;li&gt;' + social[i][0] + '&lt;img src="' + social[i][3] + '"/&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;');
                      }
  </code></pre>
  
  <p>What possibilities do I have to add a line-break/space?
  How can I achieve this in my JavaScript?</p>