Create DOM Elements with nestable arrays that reflect the structure of HTML:
```javascript
document.body.appendChild(Creatable.create(
["#content", [
["h1.prominent", "Blogs"],
["ul", [
["li a", { href: "http://functionsource.com" }, "FunctionSource"],
["li a", { href: "http://javascriptweblog.wordpress.com" }, "Javascript, Javascript"],
["li a", { href: "http://ejohn.org/category/blog" }, "John Resig"]
]]
]]
))
```
Results in:
```html
```
It all happens with one function: **Creatable.create**
```javascript
Creatable.create([TAGNAME, ATTRIBUTES, CHILDREN|CONTENT]) // returns a native DOM element
Creatable.create(["a", { href: "http://google.com" }, "Google"]);
```
Why?
-----------
* Switching in and out of Javascript and whatever templating language you use is ugly.
* No special templating language syntax. 100% pure Javascript.
* Implement view composition using plain, old functions.
* Properly formatted input still reflects the actual structure of HTML for readability.
Documentation
===========
Specify ids and classes with css-syntax
-----------
```javascript
Creatable.create(["div#footer", [
["p.fine-print", "Don't forget to read this!"]
]])
```
```html
```
Document Fragments
-----------
```javascript
Creatable.create([[
["p", "First paragraph!!!"],
["p", "Second paragraph!!!"],
["p", "Third paragraph I'm bored"]
]]);
```
```html
First paragraph!!!"
Second paragraph!!!"
Third paragraph I'm bored
```
HTML is automatically escaped
-----------
```javascript
Creatable.create(['p', 'Something important to say.'])
```
```html
Something <strong>important</strong> to say.
```
You can unescape HTML by adding { html: true }
```javascript
Creatable.create(['p', { html: true }, 'Something important to say.'])
```
```html
Something important to say.
```
Highly compatible with underscore and functional programming
-----------
```javascript
var links = [
{ url: "http://functionsource.com", label: "FunctionSource" },
{ url: "http://javascriptweblog.wordpress.com", label: "Javascript, Javascript" },
{ url: "http://ejohn.org/category/blog", label: "John Resig" }
];
var buildLinkItem = function(model) {
return ["li", [
["a", { href: model.url }, model.label]
]];
};
Creatable.create(["ul", _.map(links, buildLinkItem)])
```
```html
```
Built-in support for jQuery elements
-----------
```javascript
Creatable.create(["#myModule", [
["h1", "This is a header"],
"Some text.",
$("")
]])
```
```html
This is a header
Some text.
```
Use it to return a string of HTML instead of a DOM node
-----------
```javascript
var html = Creatable.createHtml(['a#go.small.button', 'test']);
console.log(html); //test
```
Unit Tests
===========
**creatable** has full [unit test coverage](https://github.com/RaineOrShine/creatable/tree/master/test) using mocha.
Installation
===========
Just include creatable.js in your HTML:
```html
```