Generic JavaScript DOM Element Creator

E.js

(function() {
	function dom(value, context) {
		return typeof value == "string" ? _.$(value, context) :
		(value instanceof _ ? value.dom :
		(value instanceof HTMLElement ? value : null));
	}
	
	function _(selector, options) {
		if(selector instanceof _) {
			return selector;
		} else if(!(this instanceof _)) {
			return new _(selector, options);
		}
		
		options = (function(opts, defs, d) {
			((opts && typeof opts == "object") || (opts = {}));
			for(d in defs) {
				(opts.hasOwnProperty(d) || (opts[d] = defs[d]));
			}
			return opts;
		})(options, {
			appendTo: null,
			context: document,
			html: "",
			insertAfter: null,
			insertBefore: null,
			replace: null
		});
		
		var a, parsed, elem = (selector instanceof HTMLElement ? selector : null);
		
		if(typeof selector == "string") {
			parsed = (function(selector, parsed) {
				selector.match(/(\[[^\]]+\]|#[^#.\[]+|\.[^#.\[]+|\w+)/g)
				.forEach(function(m) {
					(m[0] == "[" ? ((m = m.match(/^\[([^=\]]+)=?([^\]]+)?\]$/)) && (parsed.attribs[m[1]] = m[2] || "")) : // Attribute
					(m[0] == "." ? parsed.classes.push(m.substr(1)) : // Class
					(m[0] == "#" ? (parsed.attribs.id = m.substr(1)) : // ID
					(parsed.tag = m)))); // Tag
				});
				return parsed;
			})(selector, { attribs: {}, classes: [] });
			
			// Create element from parsed string
			elem = options.context.createElement(parsed.tag);
			
			// Add classes
			parsed.classes.forEach(function(className) {
				elem.classList.add(className);
			});
			
			// Add attributes
			for(a in parsed.attribs) {
				(parsed.attribs.hasOwnProperty(a) && elem.setAttribute(a, parsed.attribs[a]));
			}
		}
		
		(this.dom = elem).innerHTML = options.html || elem.innerHTML;
		this.context = options.context;
		this.events = {};
		this.parent = null;
		
		// Add element to DOM
		if(options.replace) {
			if((a = dom(options.replace, options.context)) && a.parentNode.replaceChild(elem, a)) {
				(options.replace instanceof _ && (this.parent = options.replace.parent));
			}
		} else if(options.appendTo) {
			if((a = dom(options.appendTo, options.context)) && a.appendChild(elem)) {
				(options.appendTo instanceof _ && (this.parent = options.appendTo));
			}
		} else if(options.insertAfter) {
			if((a = dom(options.insertAfter, options.context)) && a.parentNode.insertBefore(elem, a.nextSibling)) {
				(options.insertAfter instanceof _ && (this.parent = options.insertAfter.parent));
			}	
		} else if(options.insertBefore) {
			if((a = dom(options.insertBefore, options.context)) && a.parentNode.insertBefore(elem, a)) {
				(options.insertBefore instanceof _ && (this.parent = options.insertBefore.parent));
			}
		}
		
		return this;
	}
	
	_.prototype = {
		add: function(elements) {
			(elements instanceof Array ? elements : [ elements ])
			.forEach(function(element) {
				this.dom.appendChild(dom(_(element)));
				(element instanceof _ && (element.parent = this));
			}, this);
			
			return this;
		},
		get classes() {
			return this.dom.classList;
		},
		clear: function() {
			var elem = this.dom, child;
			
			while((child = elem.firstChild)) {
				elem.removeChild(child);
			}
			
			return this;
		},
		on: function(events, callback) {
			(events instanceof Array ? events : [ events ])
			.forEach(function(event) {
				if(typeof event == "string") {
					var self = this, fn = (typeof callback == "function" ? function(e) { return callback.call(self, e); } : null);
					(self.events[event] instanceof Array || (self.events[event] = []));
					
					if(fn) {
						self.events[event].push(fn);
						self.dom.addEventListener(event, fn);
					} else {
						self.events[event].forEach(function(callback, index, array) {
							self.dom.removeEventListener(event, callback);
							array.splice(index, 1);
						});
					}
				}
			}, this);
			
			return this;
		}
	};
	
	_.$ = function(selector, context) {
		return typeof selector == "string" ? (context || document).querySelector(selector) : null
	};
	
	_.$$ = function(selector, context) {
		return Array.prototype.slice.call((context || document).querySelectorAll(selector));
	};
	
	_.VERSION = 0.11;
	
	if(typeof window != "undefined") {
		window.E = _;
	}
	
	if(typeof module == "object") {
		module.exports = _;
	}
	
	return _;
})();