title: Why are appended bootstrap buttons not spaced properly?
body: <p>I am currently attempting to use jQuery to append multiple buttons to a bottom of a form. In an attempt to keep my code somewhat clean, I am using <code>document.createElement()</code> statements to add the items to the form, like so :</p>
  <pre class="lang-js prettyprint-override"><code>//Form-footer is a container of buttons on the end of the form.
  $(&quot;#form-footer&quot;).append(        
          $(document.createElement('button'))
          .prop({
              class: &quot;btn btn-success&quot;,
              id: &quot;save-button&quot;
          })
          .html(&quot;Save&quot;)
      )
          .append(
           $(document.createElement('button'))
              .prop({
                  class: &quot;btn btn-secondary&quot;,
                  id: &quot;preview-button&quot;
              })
              html(&quot;Preview Report&quot;)
      )
  </code></pre>
  <p>However, I noticed a styling issue : My buttons end up squished together, without the margin in between them.</p>
  <p><a href="https://i.stack.imgur.com/4Kkox.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Kkox.png" alt="enter image description here" /></a></p>
  <p>I was able to discover the cause of the styling issue. While the development console may show that the items are in new lines and indented properly....</p>
  <p><a href="https://i.stack.imgur.com/7yUJa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7yUJa.png" alt="Tag indentation looks fine in the developer console..." /></a></p>
  <p>...They actually lack both, as can be revealed by 'Edit as Html':</p>
  <p><a href="https://i.stack.imgur.com/U4Rin.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U4Rin.png" alt="Usage of 'Edit as HTML' reveals improper indentation." /></a></p>
  <p>Manually editing this HTML to add new lines and indentation in Chrome's developer console fixes the styling issue, but that's obviously not helpful in production applications.</p>
  <p>Why doesn't append add new lines for elements? What do I need to do to get appended tags to have proper new lines in their parents?</p>