Menu

Back Home

JSONimal – Elegant DOM construction with jQuery

As part of my co-op term here at TWG, I’ve had the opportunity to try out new technology, approach interesting technical problems, and develop useful bits of code outside of client work. JSONimal was created on one of my ‘lab days’ focused on innovation and experimentation.

The purpose of JSONimal is to take the pain out of constructing HTML using Javascript.

What’s it do? This example should demonstrate my goal fairly well.

$(function() {
    $.mktag("#demo").jsonimal([
        ["h1", {text: "JSONimal!"}],
        ["table",{style: 'border: 1px solid black'},[
            ["thead",[
                ["tr",{style: 'text-transform: uppercase'},[
                    ["th", {text: "one"}],
                    ["th", {text: "two"}],
                    ["th", {text: "three"}]
                ]]
            ]],
            ["tbody", [
                ["tr",[
                    ["td", {html: "a"}],
                    ["td", {text: "b"}],
                    ["td", {text: "c"}]
                ]],
                ["tr",[
                    ["td",[
                        ["a", {href: "http://www.google.ca", text: "Google"}]
                    ]],
                    ["td", {text: "b"}],
                    ["td", {text: "c"}]
                ]],
                ["tr",[
                    ["td", {text: "a"}],
                    ["td", {text: "b"}],
                    ["td", {text: "c"}]
                ]]
            ]]
        ]]
    ]).appendTo("body");
});

Which will add this to the body:

JSONimal!

one two three
a b c
Google b c
a b c

For more information and examples, check out the github page: JSONimal @ github.

I also posted it as on the jQuery plugins page – but that just points to the github page anyway. JSONimal @ plugins.jquery.com

One Response to JSONimal – Elegant DOM construction with jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>