zen.js

zen.js is a browser JS library that makes creating DOM elements awesome. Inspired by zen-coding, the syntax is css-like, terse, not tied to any framework, and very simple to use:

zen(".outer>.inner>h1.header{My Header}+p.body{Some body text}").insert([DOM element]);

results in:

<div class="outer">
	<div class="inner">
		<h1 class="header">
			My Header
		</h1>
		<p class="body">
			Some body text
		</p>
	</div>
</div>

More examples may be seen in this js-fiddle

Features

zen.js supports all features of the zen-coding plugin except filters and snippets ('table+' syntax), any deviance in behaviour that isn't documented here should be treated as a bug. Nested grouping is also supported.

API

zen.js has a simple API based around the core zen() function.

zen(code)

Compiles the zen-coding snippet into a reusable object that can create HTML DOM objects with the following methods:

zen(code).make()

Returns an Array of newly-created DOM elements(matching code) without inserting them into any document.

zen(code.insert(parent)

Calls make() and then inserts the resulting nodes as childs of the parent element.

Escaping

Care has been taken to make this library work well with escaping, for example, you can define attributes with spaces and quotes, or put '}' in a text block by escaping it. (Note the double-backslash required due to javascript's built-in string escaping)

zen("a[href='http://www.google.com/?q=moore\\'s law']{Example {google search\\}}")

Example {google search}