title: Adding html content from javascript, and changing it in html on button click
body: <p>I'm working at a twitch.tv online stream ,  and i'm tryin' : </p>
  
  <blockquote>
    <ol>
    <li><p>To prepend an html code from javascript in HTML</p></li>
    <li><p>To put the content called from javascript , in a div with id="followerInfo" , and change the content every time when i press the buttons (depends on type of data called by that buttons) </p>
    
    <ul>
    <li>. When I press the button all , it must show me all the tv streams , same for online - online streams and also with offline btn</li>
    <li>. and the most important , to understand what am I doing here, not only to copy paste a code...</li>
    </ul></li>
    </ol>
  </blockquote>
  
  <p>I'm stuck here .. I'm a self-taught (tryin' to be programmer) and implicitly a newbie in this field, but I want to learn that's why I'm asking you for a little help , if you can also explain me a little bit how to do it. </p>
  
  <pre><code>&lt;div class="row second text-center"&gt;
  
      &lt;div class="col-md-4 btn btn-info" id="all"&gt;
        All
      &lt;/div&gt; &lt;!-- Online --&gt;
      &lt;div class="col-md-4 btn btn-success" id="online"&gt;
        Online
      &lt;/div&gt; &lt;!-- Online --&gt;
      &lt;div class="col-md-4 btn btn-danger" id="offline"&gt;
        Offline
      &lt;/div&gt; &lt;!-- Offline --&gt;
  
    &lt;/div&gt;
  
    &lt;div id="followerInfo" style="margin-top:50px;"&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>for button All</p>
  
  <pre><code>$("#followerInfo").prepend("&lt;div class='row'&gt;" + "&lt;div class='col-md-4'&gt;" + "&lt;a href='" + ur_l + "' target='_blank'&gt;&lt;img src='" + logo + "'&gt;&lt;/a&gt;" + "&lt;/div&gt;" + "&lt;div class='col-md-4'&gt;" + name + "&lt;/div&gt;" + "&lt;div class='col-md-4'&gt;" + status + "&lt;/div&gt;&lt;/div&gt;");
  </code></pre>
  
  <p>for button offline</p>
  
  <pre><code>$("#followerInfo").prepend("&lt;div class='row'&gt;" + "&lt;div class='col-md-4'&gt;" + "&lt;a href='" + ur_l + "' target='_blank'&gt;&lt;img src='" + logo + "'&gt;&lt;/a&gt;" + "&lt;/div&gt;" + "&lt;div class='col-md-4'&gt;" + name + "&lt;/div&gt;" + "&lt;div class='col-md-4'&gt;" + status + "&lt;/div&gt;&lt;/div&gt;");
  </code></pre>
  
  <p>for button online</p>
  
  <pre><code> $("#followerInfo").prepend("&lt;div class='row'&gt;" + 
       "&lt;div class='col-md-4'&gt;" + "&lt;a href='" + ur_l +
       "' target='_blank'&gt;&lt;img src='" + logo + "'&gt;&lt;/a&gt;" + 
       "&lt;/div&gt;" + 
       "&lt;div class='col-md-4'&gt;" + name + "&lt;/div&gt;" + 
       "&lt;div class='col-md-4'&gt;" + status + "&lt;/div&gt;&lt;/div&gt;");
  </code></pre>
  
  <p>If it will help you to understand better my code , here is the codepen link</p>
  
  <p><a href="http://codepen.io/queky18/pen/BzbpwV" rel="nofollow">http://codepen.io/queky18/pen/BzbpwV</a></p>