Noodles, Poodles and More!
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    creatablepublic

    Create DOM Elements with nestable arrays that reflect the structure of HTML:

    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:

    <div id="content">
        <h1 class="prominent">Blogs</h1>
        <ul>
            <li><a href="http://functionsource.com">FunctionSource</a></li>
            <li><a href="http://javascriptweblog.wordpress.com">Javascript, Javascript</a></li>
            <li><a href="http://ejohn.org/category/blog">John Resig</a></li>
        </ul>
    </div>

    It all happens with one function: Creatable.create

    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

    Creatable.create(["div#footer", [
        ["p.fine-print", "Don't forget to read this!"]
    ]])
    <div id="footer">
        <p class="fine-print">Don't forget to read this!</p>
    </div>

    Document Fragments

    Creatable.create([[
        ["p", "First paragraph!!!"],
        ["p", "Second paragraph!!!"],
        ["p", "Third paragraph I'm bored"]
    ]]);
    <p>First paragraph!!!"</p>
    <p>Second paragraph!!!"</p>
    <p>Third paragraph I'm bored</p>

    HTML is automatically escaped

    Creatable.create(['p', 'Something <strong>important</strong> to say.'])
    <p>Something &lt;strong&gt;important&lt;/strong&gt; to say.</p>

    You can unescape HTML by adding { html: true }

    Creatable.create(['p', { html: true }, 'Something <strong>important</strong> to say.'])
    <p>Something <strong>important</strong> to say.</p>

    Highly compatible with underscore and functional programming

    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)])
    <ul>
        <li><a href="http://functionsource.com">FunctionSource</a></li>
        <li><a href="http://javascriptweblog.wordpress.com">Javascript, Javascript</a></li>
        <li><a href="http://ejohn.org/category/blog">John Resig</a></li>
    </ul>

    Built-in support for jQuery elements

    Creatable.create(["#myModule", [
        ["h1", "This is a header"],
        "Some text.",
        $("<div><p>Go, Go jQuery</p></div>")
    ]])
    <div id="myModule">
        <h1>This is a header</h1>
        Some text.
        <div><p>Go, Go jQuery</p></div>
    </div>

    Use it to return a string of HTML instead of a DOM node

    var html = Creatable.createHtml(['a#go.small.button', 'test']);
    console.log(html); //<a id="go" class="small button">test</a> 

    Unit Tests

    creatable has full unit test coverage using mocha.

    Installation

    Just include creatable.js in your HTML:

    <script src="creatable.js"></script>

    Keywords

    none

    install

    npm i creatable

    Downloadslast 7 days

    5

    version

    3.0.3

    license

    none

    repository

    github.com

    last publish

    collaborators

    • avatar