createElement.js // a 300 byte DOM Element creator

README.md

createElement.js

createElement.js lets document.createElement use CSS selectors.

This is a pretty useful library for building out DOM elements. The whole thing runs on one regex and a for loop, so it’s plenty fast. The script is 300 bytes when compressed and gzipped. For 524 bytes (advanced), it includes nesting support and can generate entire DOM hierarchies, including text nodes.

Usage

document.createElement(); // generates <div />

document.createElement('li'); // generates <li />

document.createElement('#foo'); // generates <div id="foo" />
document.createElement('.bar'); // generates <div class="bar" />
document.createElement('.alpha.omega'); // generates <div class="alpha omega" />

document.createElement('[tabindex]'); // generates <div tabindex />
document.createElement('[title="Hello"]'); // generates <div title="Hello" />

document.createElement('p.this#thing.also[data-amen].that'); // generates <p id="thing" class="this also that" data-amen />

document.createElement('[data-value="<.it=\"#works[well]\">"]'); // generates <div data-value="&lt;.it=&quot;#works[well]&quot;&gt;" />

Advanced usage

document.createElement('span.field\n\tlabel "To: "\n\t\tinput'); // generates <span class="field"><label>To: <input></label></span>

Compatibility

Works in everything since IE6.

createElement.advanced.js

(function (createElement) {
	'use strict';

	var
	MATCH = '(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)',
	QUOTE1 = '(["\'])((?:(?=(\\\\?))\\',
	QUOTE2 = '[\\W\\w])*?)\\',
	REGEX = '^(?:' + MATCH + ')|^#' + MATCH + '|^\\.' + MATCH + '|^\\[' + MATCH + '(?:([*$|~^]?=)' + QUOTE1 + '8' + QUOTE2 + '6' + ')?\\]|^\\s*[\\n\\r]+([\\t]*)\\s*|^(\\s+)|^' + QUOTE1 + '13' + QUOTE2 + '11';

	document.createElement = function (selectorUntrimmed) {
		var
		selector = selectorUntrimmed.replace(/^\s+|\s+$/),
		root = document.createDocumentFragment(),
		nest = [root, createElement.call(this, 'div')];

		for (var frag = root, node = frag.appendChild(nest[1]), index = 1, first = true, match; selector && (match = selector.match(REGEX));) {
			// tag
			if (match[1]) {
				frag.replaceChild(node = createElement.call(this, match[1]), frag.lastChild);

				if (first) nest[index] = node;
			}
			// id
			if (match[2]) node.id = match[2];
			// class
			if (match[3]) node.className += (node.className ? ' ' : '') + match[3];
			// attribute
			if (match[4]) node.setAttribute(match[4], match[7] || '');
			// nesting
			if (match[9] !== undefined) {
				index = match[9].length;

				frag = nest[index];
				node = nest[++index] = frag.appendChild(createElement.call(this, 'div'));
			}
			// child 
			if (match[10]) {
				frag = node;
				node = frag.appendChild(createElement.call(this, 'div'));

				first = false;
			}
			// text
			if (match[11]) {
				frag.replaceChild(node = document.createTextNode(match[12]), frag.lastChild);

				if (first) nest[index] = node;
			}

			selector = selector.slice(match[0].length);
		}

		return root.childNodes.length === 1 ? root.lastChild : root;
	};
})(document.createElement);

createElement.advanced.min.js

(function(e){"use strict";var t="(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)",n="([\"'])((?:(?=(\\\\?))\\",r="[\\W\\w])*?)\\",i="^(?:"+t+")|^#"+t+"|^\\."+t+"|^\\["+t+"(?:([*$|~^]?=)"+n+"8"+r+"6"+")?\\]|^\\s*[\\n\\r]+([\\t]*)\\s*|^(\\s+)|^"+n+"13"+r+"11";document.createElement=function(t){var n=t.replace(/^\s+|\s+$/),r=document.createDocumentFragment(),s=[r,e.call(this,"div")];for(var o=r,u=o.appendChild(s[1]),a=1,f=true,l;n&&(l=n.match(i));){if(l[1]){o.replaceChild(u=e.call(this,l[1]),o.lastChild);if(f)s[a]=u}if(l[2])u.id=l[2];if(l[3])u.className+=(u.className?" ":"")+l[3];if(l[4])u.setAttribute(l[4],l[7]||"");if(l[9]!==undefined){a=l[9].length;o=s[a];u=s[++a]=o.appendChild(e.call(this,"div"))}if(l[10]){o=u;u=o.appendChild(e.call(this,"div"));f=false}if(l[11]){o.replaceChild(u=document.createTextNode(l[12]),o.lastChild);if(f)s[a]=u}n=n.slice(l[0].length)}return r.childNodes.length===1?r.lastChild:r}})(document.createElement)

createElement.js

(function (createElement) {
    const MATCH = '(-?[_a-z]+[\\w-]*)',
        REGEX = new RegExp(`^${MATCH}|#${MATCH}|\\.${MATCH}|\\[${MATCH}(?:([*$|~^]?=)(["']?)((?:(?=(\\\\?))\\8.)*?)\\6)?\\]`, 'gi');

    document.createElement = function (selector) {
        REGEX.lastIndex = 0
        let node, match;

        while(selector && (match = REGEX.exec(selector))) {
            if (!match.index) node = createElement.call(this, match[1] || 'div');
            if (match[2]) node.id = match[2];
            if (match[3]) node.classList.add(match[3]);
            if (match[4]) node.setAttribute(match[4], match[7] || '');
        }

        return node || createElement.call(this, 'div');
    };
})(document.createElement);

createElement.min.js

!function(e){const t="(-?[_a-z]+[\\w-]*)",n=new RegExp(`^${t}|#${t}|\\.${t}|\\[${t}(?:([*$|~^]?=)(["']?)((?:(?=(\\\\?))\\8.)*?)\\6)?\\]`,"gi");document.createElement=function(t){let c,i;for(n.lastIndex=0;t&&(i=n.exec(t));)i.index||(c=e.call(this,i[1]||"div")),i[2]&&(c.id=i[2]),i[3]&&c.classList.add(i[3]),i[4]&&c.setAttribute(i[4],i[7]||"");return c||e.call(this,"div")}}(document.createElement)