Build HTML Structure

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
document.querySelector('#test').innerHTML = ` <span>
    <span class="ag-value-change-delta"></span>
    <span class="ag-value-change-value"></span></span>`;
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
Traverse Auto Builder
const template = {
	tag: 'span',
	children: [{
		tag: 'span',
		cls: ['ag-value-change-delta']
	}, {
		tag: 'span',
		cls: ['ag-value-change-value']
	}]
}
document.querySelector('#test').appendChild(loadTemplate(template))
ready

Revisions

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