Build HTML Structure (v2)

Revision 2 of this benchmark created on

Preparation HTML

<div id="test"></div>

Setup

function loadTemplate(template) {
    const { tag, cls, children } = template;
    const el = document.createElement(tag);
    if (cls && cls.length) {
        el.classList.add(...cls)
    }

    if (children && children) {
    	for (let i = 0; i < children.length; i++) {
    		el.appendChild(loadTemplate(children[i]))
    	}
  	}

    return el;
}

Teardown

document.querySelector('#test').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
const template = `<span>
    <span class="ag-value-change-delta"></span>
    <span class="ag-value-change-value"></span></span>`;
const tempDiv = document.createElement('div');
tempDiv.innerHTML = (template || '').trim();
document.querySelector('#test').appendChild(tempDiv.firstChild);
ready
Build
const template = document.createElement('span');
const delta = document.createElement('span');
        delta.classList.add('ag-value-change-delta');

const value = document.createElement('span');
        value.classList.add('ag-value-change-value');

template.appendChild(delta);
template.appendChild(value);
document.querySelector('#test').appendChild(template);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.