title: Why does my array's result doesn't follow my CSS rules?
body: <p>I am using the following code to generate custom links when the user types a word.</p>
  
  <p>The project is written with chunks of code I find online. Everything surprisingly "works" except 2 things :</p>
  
  <ul>
  <li>the generated links don't follow the CSS rules</li>
  <li>I can't find any way of separating each link</li>
  </ul>
  
  <p>I'm kind of stuck here in my journey trough coding.
  PS: If needed here's the Fiddle <a href="https://jsfiddle.net/Adrienmlt/uspjLceg/4/" rel="nofollow noreferrer">https://jsfiddle.net/Adrienmlt/uspjLceg/4/</a> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//SEARCH BOX INSPUT
  $('#go').one('click', function(){
  var id=$('#id').val();
  
  //ARRAY LIST 1
    var linkList = {
          "http://google.com/": "Test1",
          "http://google.org/": "Test2",
          "http://google.net/": "Test3",
      };
      
  //LINK GENERATION FROM ARRAY
        for (var link in linkList) {
          if (linkList.hasOwnProperty(link)) {
            var a = document.createElement('a');
                linkText = document.createTextNode(linkList[link]);
          a.href = link+id;
                 a.appendChild(linkText) ;
          }
          
  //CHECK BOX INPUT
  if( $('input[name=Label2]').is(':checked') ){
      window.open(document.body.appendChild(a))
      } else {
      document.body.appendChild(a);
      }
        }
  
     //EVERY LINK OPENS IN A NEW WINDOW
     var links = document.links;
  for (var i = 0; i &lt; links.length; i++) {
       links[i].target = "_blank";
  }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   padding-left: 20px;
  }
  h1{
   font-size: 10px;
   font-family: "roboto";
   font-weight: 200;
  }
  h2{
   font-size: 20px;
   font-family: "roboto";
   font-weight: 200;
  }
  div {
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 5px;
    padding-left: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Project 1&lt;/title&gt;
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
      &lt;link type="text/css" rel="stylesheet" href="css/style.css"&gt;
    &lt;/head&gt;
  &lt;body&gt; 
  &lt;center&gt; 
  
    &lt;h1&gt; 
     &lt;div&gt;
      &lt;!--Chekboxes--&gt;
                  &lt;input type="checkbox" id="Label2" name="Label2"&gt;
                  &lt;label for="Label2"&gt;Open every result in a new tab &lt;/label&gt;
  &lt;/div&gt;
   &lt;div&gt;
  &lt;input type="text" value="" id="id"/&gt;
  &lt;button type="button" id="go"&gt;GO&lt;/button&gt; &lt;/div&gt;
  &lt;div id="output"&gt;&lt;/div&gt;
  &lt;div id="linkText"&gt;&lt;/div&gt;
  &lt;/h1&gt;
  &lt;/center&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>