Run results for: template innerHTML vs DocumentFragment vs createElement - createTextNode

Test name	Executions per second
✓ createElement createTextNode	216,041 Ops/sec
createElement	200,067 Ops/sec
template	176,237 Ops/sec
DocumentFragment	147,641 Ops/sec

template

const tpl = document.createElement('template');
tpl.innerHTML = `
<div>
    <h1>Heading</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <button>Button</button>
</div>
`;

const el = tpl.content.firstElementChild
document.documentElement.appendChild(el.cloneNode());

DocumentFragment

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');
const headingText = document.createTextNode('Heading');
const para1Text = document.createTextNode('Paragraph 1');
const para2Text = document.createTextNode('Paragraph 2');
const buttonText = document.createTextNode('Button');

heading.appendChild(headingText);
para1.appendChild(para1Text);
para2.appendChild(para2Text);
button.appendChild(buttonText);

el.appendChild(heading);
el.appendChild(para1);
el.appendChild(para2);
el.appendChild(button);

fragment.appendChild(el);
document.documentElement.appendChild(fragment);

createElement

// 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(el);

createElement createTextNode

// 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');
const headingText = document.createTextNode('Heading');
const para1Text = document.createTextNode('Paragraph 1');
const para2Text = document.createTextNode('Paragraph 2');
const buttonText = document.createTextNode('Button');

heading.appendChild(headingText);
para1.appendChild(para1Text);
para2.appendChild(para2Text);
button.appendChild(buttonText);

el.appendChild(heading);
el.appendChild(para1);
el.appendChild(para2);
el.appendChild(button);

// fragment.appendChild(el);
document.documentElement.appendChild(el);