function getTemplateInnerHTML()

{

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

    template.innerHTML = `

    <div>

        <h1>Heading</h1>

        <p>Paragraph 1</p>

        <p>Paragraph 2</p>

        <button>Button</button>

    </div>

    `;

​

    const element = template.content.firstElementChild;

    const clone   = element.cloneNode();

    document.documentElement.appendChild(clone);

    return clone;

};

​

function getTemplateNodes()

{

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

​

    const element = 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';

​

    element.appendChild(heading);

    element.appendChild(para1);

    element.appendChild(para2);

    element.appendChild(button);

​

    template.content.appendChild(element);

​

    document.documentElement.appendChild(element);

    return element;

};

​

function getDocumentFragment()

{

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

​

    const element  = 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';

​

    element.appendChild(heading);

    element.appendChild(para1);

    element.appendChild(para2);

    element.appendChild(button);

​

    fragment.appendChild(element);

    document.documentElement.appendChild(fragment);

    return fragment;

};