DOM Construction

Benchmark created by Bryan Elliott on November 21, 2016

Preparation HTML

<script>
var objEl = { '<>': 'test', '@href': 'blah', '+': [{ '<>': 'child', '@src': '/testing' },{ '<>': 'child', '@src': '/testing' },{ '<>': 'child', '@src': '/testing' },{ '<>': 'child', '@src': '/testing' },{ '<>': 'child', '@src': '/testing' }]};
var strEl = '<test href="blah"><child src="/testing" /><child src="/testing" /><child src="/testing" /><child src="/testing" /><child src="/testing" /></test>';

function parseObjEl(obj) {
	if (obj.tagName) {
		var el = document.createElement(obj['<>']);
		for (var name in el) {
			var value = obj[name];
			if (name === '<>') { continue; }
			if (name === '#') {
				el.textContent = value;
				continue;
			} 
			if (name[0] === '@') {
				el.setAttribute(name.substr(1), value);
				continue;
			}
			if (name[0] === '+') {
				for (var i = 0; i < value.length; i += 1) {
					el.appendChild(parseObjEl(value[i]));
				}
			}
		}
		return el;
	} else if (typeof obj === 'string') {
		var tn = document.createTextNode(obj);
		return tn;
	}
}
var factory = document.createElement('div');
function parseStrEl(str) {
	factory.innerHTML = str;
	var ret = factory.firstChild;
	factory.removeChild(ret);
	return ret;
}
function parseStrElNoRemove(str) {
	factory.innerHTML = str;
	var ret = factory.firstChild;
	return ret;
}
</script>

Test runner

parseObjEl(objEl);

parseStrEl(strEl);

parseStrElNoRemove(strEl);

Revisions

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

• Revision 1: published by Bryan Elliott on November 21, 2016