Indent created Elements in javascript

So I've used javascript to build up an HTML markup for a component (accordion)

const accordItem = document.createElement("div");
const accordTitle = document.createElement("p");
const accordContent = document.createElement("div");
const accordContentParagraph = document.createElement("p");

All the elements are appended to a container

container.append(accordItem);
accordItem.append(accordTitle, accordContent);
accordContent.append(accordContentParagraph);

In the code, I populate the divs and paragraphs with content. So, an accordion generator of a sort. So the imaginary user can see a preview of how it would look. And also download a text file.

But if I copy the code from developers' tools. Or write it in the file; I see this mess of a markup. Everything is in one line.

<div class="accordionItem"><p class="accordionTitle">This is some content</p><div class="accordionContent"><p>This is additional content! Something Something</p></div></div><div class="accordionItem"><p class="accordionTitle">This is some content, more</p><div class="accordionContent"><p>Moremore</p></div></div>

While not really a problem, I would like to learn why that is. (pretty new at this).

And is there an easy way to make it indented?

like so:

<div class="accordionItem">
    <p class="accordionTitle">This is some content</p>
    <div class="accordionContent">
        <p>This is additional content! Something Something</p>
    </div>
</div>
<div class="accordionItem">
    <p class="accordionTitle">This is some content, more</p>
    <div class="accordionContent">
        <p>Moremore</p>
    </div>
</div>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/o1Z6zXr