{"_id":"creatable","_rev":"9-0bae6187a2aefab6450be794c9366078","name":"creatable","description":"Elegant HTML generation. No templating. Just Javascript.","dist-tags":{"latest":"3.0.3"},"versions":{"3.0.1":{"name":"creatable","version":"3.0.1","description":"Elegant HTML generation. No templating. Just Javascript.","main":"creatable.js","directories":{"test":"test"},"scripts":{"test":"mocha"},"repository":{"type":"git","url":"git://github.com/RaineOrShine/creatable.git"},"author":{"name":"Raine Lourie"},"keywords":["dom","html","templates","templating"],"license":"BSD","gitHead":"3ad55908257889cb62628f7a9b49939e852977b9","readmeFilename":"README.md","devDependencies":{"mocha":"~1.9.0","chai":"~1.5.0"},"readme":"Create DOM Elements with nestable arrays that reflect the structure of HTML:\r\n\r\n```javascript\r\ndocument.body.appendChild(Creatable.create(\r\n\t[\"#content\", [\r\n\t\t[\"h1.prominent\", \"Blogs\"],\r\n\t\t[\"ul\", [\r\n\t\t\t[\"li a\", { href: \"http://functionsource.com\" }, \"FunctionSource\"],\r\n\t\t\t[\"li a\", { href: \"http://javascriptweblog.wordpress.com\" }, \"Javascript, Javascript\"],\r\n\t\t\t[\"li a\", { href: \"http://ejohn.org/category/blog\" }, \"John Resig\"]\r\n\t\t]]\r\n\t]]\r\n))\r\n```\r\n\r\nResults in:\r\n\r\n```html\r\n<div id=\"content\">\r\n\t<h1 class=\"prominent\">Blogs</h1>\r\n\t<ul>\r\n\t\t<li><a href=\"http://functionsource.com\">FunctionSource</a></li>\r\n\t\t<li><a href=\"http://javascriptweblog.wordpress.com\">Javascript, Javascript</a></li>\r\n\t\t<li><a href=\"http://ejohn.org/category/blog\">John Resig</a></li>\r\n\t</ul>\r\n</div>\r\n```\r\n\r\nIt all happens with one function: **Creatable.create**\r\n\r\n```javascript\r\nCreatable.create([TAGNAME, ATTRIBUTES, CHILDREN|CONTENT]) // returns a native DOM element\r\nCreatable.create([\"a\", { href: \"http://google.com\" }, \"Google\"]);\r\n```\r\n\r\nWhy?\r\n-----------\r\n* Switching in and out of Javascript and whatever templating language you use is ugly.\r\n* No special templating language syntax. 100% pure Javascript.\r\n* Implement view composition using plain, old functions.\r\n* Properly formatted input still reflects the actual structure of HTML for readability.\r\n\r\nDocumentation\r\n===========\r\n\r\nSpecify ids and classes with css-syntax\r\n-----------\r\n\r\n```javascript\r\nCreatable.create([\"div#footer\", [\r\n\t[\"p.fine-print\", \"Don't forget to read this!\"]\r\n]])\r\n```\r\n\r\n```html\r\n<div id=\"footer\">\r\n\t<p class=\"fine-print\">Don't forget to read this!</p>\r\n</div>\r\n```\r\n\r\nDocument Fragments\r\n-----------\r\n\r\n```javascript\r\nCreatable.create([[\r\n\t[\"p\", \"First paragraph!!!\"],\r\n\t[\"p\", \"Second paragraph!!!\"],\r\n\t[\"p\", \"Third paragraph I'm bored\"]\r\n]]);\r\n```\r\n\r\n```html\r\n<p>First paragraph!!!\"</p>\r\n<p>Second paragraph!!!\"</p>\r\n<p>Third paragraph I'm bored</p>\r\n```\r\n\r\nHTML is automatically escaped\r\n-----------\r\n\r\n```javascript\r\nCreatable.create(['p', 'Something <strong>important</strong> to say.'])\r\n```\r\n\r\n```html\r\n<p>Something &lt;strong&gt;important&lt;/strong&gt; to say.</p>\r\n```\r\n\r\nYou can unescape HTML by adding { html: true }\r\n\r\n```javascript\r\nCreatable.create(['p', { html: true }, 'Something <strong>important</strong> to say.'])\r\n```\r\n\r\n```html\r\n<p>Something <strong>important</strong> to say.</p>\r\n```\r\n\r\nHighly compatible with underscore and functional programming\r\n-----------\r\n\r\n```javascript\r\nvar links = [\r\n\t{ url: \"http://functionsource.com\", label: \"FunctionSource\" },\r\n\t{ url: \"http://javascriptweblog.wordpress.com\", label: \"Javascript, Javascript\" },\r\n\t{ url: \"http://ejohn.org/category/blog\", label: \"John Resig\" }\r\n];\r\n\r\nvar buildLinkItem = function(model) {\r\n\treturn [\"li\", [\r\n\t\t[\"a\", { href: model.url }, model.label]\r\n\t]];\r\n};\r\n\r\nCreatable.create([\"ul\", _.map(links, buildLinkItem)])\r\n```\r\n\r\n```html\r\n<ul>\r\n\t<li><a href=\"http://functionsource.com\">FunctionSource</a></li>\r\n\t<li><a href=\"http://javascriptweblog.wordpress.com\">Javascript, Javascript</a></li>\r\n\t<li><a href=\"http://ejohn.org/category/blog\">John Resig</a></li>\r\n</ul>\r\n```\r\n\r\nBuilt-in support for jQuery elements\r\n-----------\r\n```javascript\r\nCreatable.create([\"#myModule\", [\r\n\t[\"h1\", \"This is a header\"],\r\n\t\"Some text.\",\r\n\t$(\"<div><p>Go, Go jQuery</p></div>\")\r\n]])\r\n```\r\n\r\n```html\r\n<div id=\"myModule\">\r\n\t<h1>This is a header</h1>\r\n\tSome text.\r\n\t<div><p>Go, Go jQuery</p></div>\r\n</div>\r\n```\r\n\r\nUse it to return a string of HTML instead of a DOM node\r\n-----------\r\n```javascript\r\nvar html = Creatable.createHtml(['a#go.small.button', 'test']);\r\nconsole.log(html); //<a id=\"go\" class=\"small button\">test</a>\r\n```\r\n\r\n\r\nUnit Tests\r\n===========\r\n\r\n**creatable** has full [unit test coverage](https://github.com/RaineOrShine/creatable/tree/master/test) using mocha.\r\n\r\nInstallation\r\n===========\r\n\r\nJust include creatable.js in your HTML:\r\n\r\n```html\r\n<script src=\"creatable.js\"></script>\r\n```\r\n\r\n\r\n","_id":"creatable@3.0.1","dist":{"shasum":"663e26be2033819dd87681f832f8fd03f31bab13","tarball":"https://registry.npmjs.org/creatable/-/creatable-3.0.1.tgz","integrity":"sha512-VQs1HwWkzu04nHHhBJNIClPJYJo63xi/5fydD38ub/ixYX4OM44hhppclZcVJMmDfsvKbk0IpctYOUBofz/lOQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXYUbyUIDFb1nEs3Y0ynL2UptF/6xw/OjgV4DjXZ8FkAiAvD1Q1i9EEfP7GcvnUWXKFqcbbqkAk+MicgFVrkSUcTg=="}]},"_from":".","_npmVersion":"1.2.18","_npmUser":{"name":"raine","email":"raineorshine@gmail.com"},"maintainers":[{"name":"raine","email":"raineorshine@gmail.com"}]},"3.0.2":{"name":"creatable","version":"3.0.2","description":"Elegant HTML generation. No templating. Just Javascript.","main":"creatable.js","directories":{"test":"test"},"scripts":{"test":"mocha"},"repository":{"type":"git","url":"git://github.com/RaineOrShine/creatable.git"},"author":{"name":"Raine Lourie"},"keywords":["dom","html","templates","templating"],"license":"BSD","gitHead":"3ad55908257889cb62628f7a9b49939e852977b9","readmeFilename":"README.md","devDependencies":{"mocha":"~1.9.0","chai":"~1.5.0"},"dependencies":{"node-html-encoder":"0.0.2"},"readme":"Create DOM Elements with nestable arrays that reflect the structure of HTML:\r\n\r\n```javascript\r\ndocument.body.appendChild(Creatable.create(\r\n\t[\"#content\", [\r\n\t\t[\"h1.prominent\", \"Blogs\"],\r\n\t\t[\"ul\", [\r\n\t\t\t[\"li a\", { href: \"http://functionsource.com\" }, \"FunctionSource\"],\r\n\t\t\t[\"li a\", { href: \"http://javascriptweblog.wordpress.com\" }, \"Javascript, Javascript\"],\r\n\t\t\t[\"li a\", { href: \"http://ejohn.org/category/blog\" }, \"John Resig\"]\r\n\t\t]]\r\n\t]]\r\n))\r\n```\r\n\r\nResults in:\r\n\r\n```html\r\n<div id=\"content\">\r\n\t<h1 class=\"prominent\">Blogs</h1>\r\n\t<ul>\r\n\t\t<li><a href=\"http://functionsource.com\">FunctionSource</a></li>\r\n\t\t<li><a href=\"http://javascriptweblog.wordpress.com\">Javascript, Javascript</a></li>\r\n\t\t<li><a href=\"http://ejohn.org/category/blog\">John Resig</a></li>\r\n\t</ul>\r\n</div>\r\n```\r\n\r\nIt all happens with one function: **Creatable.create**\r\n\r\n```javascript\r\nCreatable.create([TAGNAME, ATTRIBUTES, CHILDREN|CONTENT]) // returns a native DOM element\r\nCreatable.create([\"a\", { href: \"http://google.com\" }, \"Google\"]);\r\n```\r\n\r\nWhy?\r\n-----------\r\n* Switching in and out of Javascript and whatever templating language you use is ugly.\r\n* No special templating language syntax. 100% pure Javascript.\r\n* Implement view composition using plain, old functions.\r\n* Properly formatted input still reflects the actual structure of HTML for readability.\r\n\r\nDocumentation\r\n===========\r\n\r\nSpecify ids and classes with css-syntax\r\n-----------\r\n\r\n```javascript\r\nCreatable.create([\"div#footer\", [\r\n\t[\"p.fine-print\", \"Don't forget to read this!\"]\r\n]])\r\n```\r\n\r\n```html\r\n<div id=\"footer\">\r\n\t<p class=\"fine-print\">Don't forget to read this!</p>\r\n</div>\r\n```\r\n\r\nDocument Fragments\r\n-----------\r\n\r\n```javascript\r\nCreatable.create([[\r\n\t[\"p\", \"First paragraph!!!\"],\r\n\t[\"p\", \"Second paragraph!!!\"],\r\n\t[\"p\", \"Third paragraph I'm bored\"]\r\n]]);\r\n```\r\n\r\n```html\r\n<p>First paragraph!!!\"</p>\r\n<p>Second paragraph!!!\"</p>\r\n<p>Third paragraph I'm bored</p>\r\n```\r\n\r\nHTML is automatically escaped\r\n-----------\r\n\r\n```javascript\r\nCreatable.create(['p', 'Something <strong>important</strong> to say.'])\r\n```\r\n\r\n```html\r\n<p>Something &lt;strong&gt;important&lt;/strong&gt; to say.</p>\r\n```\r\n\r\nYou can unescape HTML by adding { html: true }\r\n\r\n```javascript\r\nCreatable.create(['p', { html: true }, 'Something <strong>important</strong> to say.'])\r\n```\r\n\r\n```html\r\n<p>Something <strong>important</strong> to say.</p>\r\n```\r\n\r\nHighly compatible with underscore and functional programming\r\n-----------\r\n\r\n```javascript\r\nvar links = [\r\n\t{ url: \"http://functionsource.com\", label: \"FunctionSource\" },\r\n\t{ url: \"http://javascriptweblog.wordpress.com\", label: \"Javascript, Javascript\" },\r\n\t{ url: \"http://ejohn.org/category/blog\", label: \"John Resig\" }\r\n];\r\n\r\nvar buildLinkItem = function(model) {\r\n\treturn [\"li\", [\r\n\t\t[\"a\", { href: model.url }, model.label]\r\n\t]];\r\n};\r\n\r\nCreatable.create([\"ul\", _.map(links, buildLinkItem)])\r\n```\r\n\r\n```html\r\n<ul>\r\n\t<li><a href=\"http://functionsource.com\">FunctionSource</a></li>\r\n\t<li><a href=\"http://javascriptweblog.wordpress.com\">Javascript, Javascript</a></li>\r\n\t<li><a href=\"http://ejohn.org/category/blog\">John Resig</a></li>\r\n</ul>\r\n```\r\n\r\nBuilt-in support for jQuery elements\r\n-----------\r\n```javascript\r\nCreatable.create([\"#myModule\", [\r\n\t[\"h1\", \"This is a header\"],\r\n\t\"Some text.\",\r\n\t$(\"<div><p>Go, Go jQuery</p></div>\")\r\n]])\r\n```\r\n\r\n```html\r\n<div id=\"myModule\">\r\n\t<h1>This is a header</h1>\r\n\tSome text.\r\n\t<div><p>Go, Go jQuery</p></div>\r\n</div>\r\n```\r\n\r\nUse it to return a string of HTML instead of a DOM node\r\n-----------\r\n```javascript\r\nvar html = Creatable.createHtml(['a#go.small.button', 'test']);\r\nconsole.log(html); //<a id=\"go\" class=\"small button\">test</a>\r\n```\r\n\r\n\r\nUnit Tests\r\n===========\r\n\r\n**creatable** has full [unit test coverage](https://github.com/RaineOrShine/creatable/tree/master/test) using mocha.\r\n\r\nInstallation\r\n===========\r\n\r\nJust include creatable.js in your HTML:\r\n\r\n```html\r\n<script src=\"creatable.js\"></script>\r\n```\r\n\r\n\r\n","_id":"creatable@3.0.2","dist":{"shasum":"5622fb7cab8fa44c8007a608be48122f0db7258e","tarball":"https://registry.npmjs.org/creatable/-/creatable-3.0.2.tgz","integrity":"sha512-kW4xkGTIcQ4T/oGxdWc7A1aaxPf6FjI7nBP4JrVFDQ7R0t4fBJ0lLxhi0HwPQJEJ4WnHCnNxfdq1dMfwWZ5JCQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHKfj2HzKMqQiylXM2Rr653yb+ma0WilNLBnJDSRGNnFAiA4cE8J+By/xdVQ3HWCOrIQUsMm1nk6lP/Sdx8JRcJVUA=="}]},"_from":".","_npmVersion":"1.2.18","_npmUser":{"name":"raine","email":"raineorshine@gmail.com"},"maintainers":[{"name":"raine","email":"raineorshine@gmail.com"}]},"3.0.3":{"name":"creatable","version":"3.0.3","description":"Elegant HTML generation. No templating. Just Javascript.","main":"creatable.js","directories":{"test":"test"},"scripts":{"test":"mocha"},"repository":{"type":"git","url":"git://github.com/RaineOrShine/creatable.git"},"author":{"name":"Raine Lourie"},"keywords":["dom","html","templates","templating"],"license":"BSD","gitHead":"3ad55908257889cb62628f7a9b49939e852977b9","readmeFilename":"README.md","devDependencies":{"mocha":"~1.9.0","chai":"~1.5.0"},"dependencies":{"node-html-encoder":"0.0.2"},"readme":"Create DOM Elements with nestable arrays that reflect the structure of HTML:\r\n\r\n```javascript\r\ndocument.body.appendChild(Creatable.create(\r\n\t[\"#content\", [\r\n\t\t[\"h1.prominent\", \"Blogs\"],\r\n\t\t[\"ul\", [\r\n\t\t\t[\"li a\", { href: \"http://functionsource.com\" }, \"FunctionSource\"],\r\n\t\t\t[\"li a\", { href: \"http://javascriptweblog.wordpress.com\" }, \"Javascript, Javascript\"],\r\n\t\t\t[\"li a\", { href: \"http://ejohn.org/category/blog\" }, \"John Resig\"]\r\n\t\t]]\r\n\t]]\r\n))\r\n```\r\n\r\nResults in:\r\n\r\n```html\r\n<div id=\"content\">\r\n\t<h1 class=\"prominent\">Blogs</h1>\r\n\t<ul>\r\n\t\t<li><a href=\"http://functionsource.com\">FunctionSource</a></li>\r\n\t\t<li><a href=\"http://javascriptweblog.wordpress.com\">Javascript, Javascript</a></li>\r\n\t\t<li><a href=\"http://ejohn.org/category/blog\">John Resig</a></li>\r\n\t</ul>\r\n</div>\r\n```\r\n\r\nIt all happens with one function: **Creatable.create**\r\n\r\n```javascript\r\nCreatable.create([TAGNAME, ATTRIBUTES, CHILDREN|CONTENT]) // returns a native DOM element\r\nCreatable.create([\"a\", { href: \"http://google.com\" }, \"Google\"]);\r\n```\r\n\r\nWhy?\r\n-----------\r\n* Switching in and out of Javascript and whatever templating language you use is ugly.\r\n* No special templating language syntax. 100% pure Javascript.\r\n* Implement view composition using plain, old functions.\r\n* Properly formatted input still reflects the actual structure of HTML for readability.\r\n\r\nDocumentation\r\n===========\r\n\r\nSpecify ids and classes with css-syntax\r\n-----------\r\n\r\n```javascript\r\nCreatable.create([\"div#footer\", [\r\n\t[\"p.fine-print\", \"Don't forget to read this!\"]\r\n]])\r\n```\r\n\r\n```html\r\n<div id=\"footer\">\r\n\t<p class=\"fine-print\">Don't forget to read this!</p>\r\n</div>\r\n```\r\n\r\nDocument Fragments\r\n-----------\r\n\r\n```javascript\r\nCreatable.create([[\r\n\t[\"p\", \"First paragraph!!!\"],\r\n\t[\"p\", \"Second paragraph!!!\"],\r\n\t[\"p\", \"Third paragraph I'm bored\"]\r\n]]);\r\n```\r\n\r\n```html\r\n<p>First paragraph!!!\"</p>\r\n<p>Second paragraph!!!\"</p>\r\n<p>Third paragraph I'm bored</p>\r\n```\r\n\r\nHTML is automatically escaped\r\n-----------\r\n\r\n```javascript\r\nCreatable.create(['p', 'Something <strong>important</strong> to say.'])\r\n```\r\n\r\n```html\r\n<p>Something &lt;strong&gt;important&lt;/strong&gt; to say.</p>\r\n```\r\n\r\nYou can unescape HTML by adding { html: true }\r\n\r\n```javascript\r\nCreatable.create(['p', { html: true }, 'Something <strong>important</strong> to say.'])\r\n```\r\n\r\n```html\r\n<p>Something <strong>important</strong> to say.</p>\r\n```\r\n\r\nHighly compatible with underscore and functional programming\r\n-----------\r\n\r\n```javascript\r\nvar links = [\r\n\t{ url: \"http://functionsource.com\", label: \"FunctionSource\" },\r\n\t{ url: \"http://javascriptweblog.wordpress.com\", label: \"Javascript, Javascript\" },\r\n\t{ url: \"http://ejohn.org/category/blog\", label: \"John Resig\" }\r\n];\r\n\r\nvar buildLinkItem = function(model) {\r\n\treturn [\"li\", [\r\n\t\t[\"a\", { href: model.url }, model.label]\r\n\t]];\r\n};\r\n\r\nCreatable.create([\"ul\", _.map(links, buildLinkItem)])\r\n```\r\n\r\n```html\r\n<ul>\r\n\t<li><a href=\"http://functionsource.com\">FunctionSource</a></li>\r\n\t<li><a href=\"http://javascriptweblog.wordpress.com\">Javascript, Javascript</a></li>\r\n\t<li><a href=\"http://ejohn.org/category/blog\">John Resig</a></li>\r\n</ul>\r\n```\r\n\r\nBuilt-in support for jQuery elements\r\n-----------\r\n```javascript\r\nCreatable.create([\"#myModule\", [\r\n\t[\"h1\", \"This is a header\"],\r\n\t\"Some text.\",\r\n\t$(\"<div><p>Go, Go jQuery</p></div>\")\r\n]])\r\n```\r\n\r\n```html\r\n<div id=\"myModule\">\r\n\t<h1>This is a header</h1>\r\n\tSome text.\r\n\t<div><p>Go, Go jQuery</p></div>\r\n</div>\r\n```\r\n\r\nUse it to return a string of HTML instead of a DOM node\r\n-----------\r\n```javascript\r\nvar html = Creatable.createHtml(['a#go.small.button', 'test']);\r\nconsole.log(html); //<a id=\"go\" class=\"small button\">test</a>\r\n```\r\n\r\n\r\nUnit Tests\r\n===========\r\n\r\n**creatable** has full [unit test coverage](https://github.com/RaineOrShine/creatable/tree/master/test) using mocha.\r\n\r\nInstallation\r\n===========\r\n\r\nJust include creatable.js in your HTML:\r\n\r\n```html\r\n<script src=\"creatable.js\"></script>\r\n```\r\n\r\n\r\n","_id":"creatable@3.0.3","dist":{"shasum":"21fc7c94294f41f0eac158bd30e92b5bd8815fd6","tarball":"https://registry.npmjs.org/creatable/-/creatable-3.0.3.tgz","integrity":"sha512-a9nVXgWIKHm5M5vos9WLnRdSM8vKqgsarWhqzz5vXbyQsRgXTIHbZFI4oxw/4AoDQhuW6X0U8pUIRaba4Ekylw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJXUL2Th1jz0rVRwswVW5uz3NhX5dP9c9e4jYvC++uMAiEA1hplJDxZdZUQ9oAg62aFhc5Kle56mnA60zPLfAOemWA="}]},"_from":".","_npmVersion":"1.2.18","_npmUser":{"name":"raine","email":"raineorshine@gmail.com"},"maintainers":[{"name":"raine","email":"raineorshine@gmail.com"}]}},"readme":"Create DOM Elements with nestable arrays that reflect the structure of HTML:\r\n\r\n```javascript\r\ndocument.body.appendChild(Creatable.create(\r\n\t[\"#content\", [\r\n\t\t[\"h1.prominent\", \"Blogs\"],\r\n\t\t[\"ul\", [\r\n\t\t\t[\"li a\", { href: \"http://functionsource.com\" }, \"FunctionSource\"],\r\n\t\t\t[\"li a\", { href: \"http://javascriptweblog.wordpress.com\" }, \"Javascript, Javascript\"],\r\n\t\t\t[\"li a\", { href: \"http://ejohn.org/category/blog\" }, \"John Resig\"]\r\n\t\t]]\r\n\t]]\r\n))\r\n```\r\n\r\nResults in:\r\n\r\n```html\r\n<div id=\"content\">\r\n\t<h1 class=\"prominent\">Blogs</h1>\r\n\t<ul>\r\n\t\t<li><a href=\"http://functionsource.com\">FunctionSource</a></li>\r\n\t\t<li><a href=\"http://javascriptweblog.wordpress.com\">Javascript, Javascript</a></li>\r\n\t\t<li><a href=\"http://ejohn.org/category/blog\">John Resig</a></li>\r\n\t</ul>\r\n</div>\r\n```\r\n\r\nIt all happens with one function: **Creatable.create**\r\n\r\n```javascript\r\nCreatable.create([TAGNAME, ATTRIBUTES, CHILDREN|CONTENT]) // returns a native DOM element\r\nCreatable.create([\"a\", { href: \"http://google.com\" }, \"Google\"]);\r\n```\r\n\r\nWhy?\r\n-----------\r\n* Switching in and out of Javascript and whatever templating language you use is ugly.\r\n* No special templating language syntax. 100% pure Javascript.\r\n* Implement view composition using plain, old functions.\r\n* Properly formatted input still reflects the actual structure of HTML for readability.\r\n\r\nDocumentation\r\n===========\r\n\r\nSpecify ids and classes with css-syntax\r\n-----------\r\n\r\n```javascript\r\nCreatable.create([\"div#footer\", [\r\n\t[\"p.fine-print\", \"Don't forget to read this!\"]\r\n]])\r\n```\r\n\r\n```html\r\n<div id=\"footer\">\r\n\t<p class=\"fine-print\">Don't forget to read this!</p>\r\n</div>\r\n```\r\n\r\nDocument Fragments\r\n-----------\r\n\r\n```javascript\r\nCreatable.create([[\r\n\t[\"p\", \"First paragraph!!!\"],\r\n\t[\"p\", \"Second paragraph!!!\"],\r\n\t[\"p\", \"Third paragraph I'm bored\"]\r\n]]);\r\n```\r\n\r\n```html\r\n<p>First paragraph!!!\"</p>\r\n<p>Second paragraph!!!\"</p>\r\n<p>Third paragraph I'm bored</p>\r\n```\r\n\r\nHTML is automatically escaped\r\n-----------\r\n\r\n```javascript\r\nCreatable.create(['p', 'Something <strong>important</strong> to say.'])\r\n```\r\n\r\n```html\r\n<p>Something &lt;strong&gt;important&lt;/strong&gt; to say.</p>\r\n```\r\n\r\nYou can unescape HTML by adding { html: true }\r\n\r\n```javascript\r\nCreatable.create(['p', { html: true }, 'Something <strong>important</strong> to say.'])\r\n```\r\n\r\n```html\r\n<p>Something <strong>important</strong> to say.</p>\r\n```\r\n\r\nHighly compatible with underscore and functional programming\r\n-----------\r\n\r\n```javascript\r\nvar links = [\r\n\t{ url: \"http://functionsource.com\", label: \"FunctionSource\" },\r\n\t{ url: \"http://javascriptweblog.wordpress.com\", label: \"Javascript, Javascript\" },\r\n\t{ url: \"http://ejohn.org/category/blog\", label: \"John Resig\" }\r\n];\r\n\r\nvar buildLinkItem = function(model) {\r\n\treturn [\"li\", [\r\n\t\t[\"a\", { href: model.url }, model.label]\r\n\t]];\r\n};\r\n\r\nCreatable.create([\"ul\", _.map(links, buildLinkItem)])\r\n```\r\n\r\n```html\r\n<ul>\r\n\t<li><a href=\"http://functionsource.com\">FunctionSource</a></li>\r\n\t<li><a href=\"http://javascriptweblog.wordpress.com\">Javascript, Javascript</a></li>\r\n\t<li><a href=\"http://ejohn.org/category/blog\">John Resig</a></li>\r\n</ul>\r\n```\r\n\r\nBuilt-in support for jQuery elements\r\n-----------\r\n```javascript\r\nCreatable.create([\"#myModule\", [\r\n\t[\"h1\", \"This is a header\"],\r\n\t\"Some text.\",\r\n\t$(\"<div><p>Go, Go jQuery</p></div>\")\r\n]])\r\n```\r\n\r\n```html\r\n<div id=\"myModule\">\r\n\t<h1>This is a header</h1>\r\n\tSome text.\r\n\t<div><p>Go, Go jQuery</p></div>\r\n</div>\r\n```\r\n\r\nUse it to return a string of HTML instead of a DOM node\r\n-----------\r\n```javascript\r\nvar html = Creatable.createHtml(['a#go.small.button', 'test']);\r\nconsole.log(html); //<a id=\"go\" class=\"small button\">test</a>\r\n```\r\n\r\n\r\nUnit Tests\r\n===========\r\n\r\n**creatable** has full [unit test coverage](https://github.com/RaineOrShine/creatable/tree/master/test) using mocha.\r\n\r\nInstallation\r\n===========\r\n\r\nJust include creatable.js in your HTML:\r\n\r\n```html\r\n<script src=\"creatable.js\"></script>\r\n```\r\n\r\n\r\n","maintainers":[{"name":"raine","email":"raineorshine@gmail.com"}],"time":{"modified":"2022-06-14T02:49:56.347Z","created":"2013-04-19T18:25:31.506Z","3.0.1":"2013-04-19T18:25:36.089Z","3.0.2":"2013-04-19T19:34:38.529Z","3.0.3":"2013-04-19T22:30:59.542Z"},"author":{"name":"Raine Lourie"},"repository":{"type":"git","url":"git://github.com/RaineOrShine/creatable.git"}}