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 `document.createElement()` statements to add the items to the form, like so :

```js
//Form-footer is a container of buttons on the end of the form.
$("#form-footer").append(        
        $(document.createElement('button'))
        .prop({
            class: "btn btn-success",
            id: "save-button"
        })
        .html("Save")
    )
        .append(
         $(document.createElement('button'))
            .prop({
                class: "btn btn-secondary",
                id: "preview-button"
            })
            html("Preview Report")
    )

```

However, I noticed a styling issue : My buttons end up squished together, without the margin in between them.

[![enter image description here](https://i.stack.imgur.com/4Kkox.png)](https://i.stack.imgur.com/4Kkox.png)

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....

[![Tag indentation looks fine in the developer console...](https://i.stack.imgur.com/7yUJa.png)](https://i.stack.imgur.com/7yUJa.png)

...They actually lack both, as can be revealed by 'Edit as Html':

[![Usage of 'Edit as HTML' reveals improper indentation.](https://i.stack.imgur.com/U4Rin.png)](https://i.stack.imgur.com/U4Rin.png)

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.

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?