title: JQuery dynamically added button, text not in button
body: <p>When I attempt creating buttons from jQuery, the text appears outside of the button element I created.  I've tried creating each button individually and as a group, and neither method seems to work.  What am I doing wrong?</p>
  
  <pre><code>&lt;div id = 'output_div'&gt;&lt;/div&gt;
  
  var main = function(){
      var selections = ['derp', 'herp', 'merp', 'foo'];
  
  
      //individually creating each button
      for(var i = 0; i &lt; selections.length; i++){
          $('#output_div').append("&lt;input type='button'&gt;" + selections[i] +
            "&lt;/input&gt;");
      };
  
      $('#output_div').append('&lt;br&gt;&lt;br&gt;');
  
  
      //buttons all created at the same time
      var group_buttons = '';
  
      for(var i = 0; i &lt; selections.length; i++){
          group_buttons += ("&lt;input type='button'&gt;" + selections[i] + "&lt;/input&gt;");
      };
  
      $('#output_div').append(group_buttons);
  };
  
  $(document).ready(main);
  </code></pre>
  
  <p><a href="https://jsfiddle.net/fjr56Lsj/4/" rel="nofollow">https://jsfiddle.net/fjr56Lsj/4/</a></p>