const tpl = document.createElement('template');

tpl.innerHTML = `

<div>

    <h1>Heading</h1>

    <p>Paragraph 1</p>

    <p>Paragraph 2</p>

    <button>Button</button>

</div>

`;

​

document.documentElement.appendChild(tpl.content);

const fragment = document.createDocumentFragment();

​

const el = document.createElement('div');

const heading = document.createElement('h1');

const para1 = document.createElement('p');

const para2 = document.createElement('p');

const button = document.createElement('button');

​

heading.innerText = 'Heading';

para1.innerText = 'Paragraph 1';

para2.innerText = 'Paragraph 2';

button.innerText = 'Button';

​

el.appendChild(heading);

el.appendChild(para1);

el.appendChild(para2);

el.appendChild(button);

​

fragment.appendChild(el);

document.documentElement.appendChild(fragment);