DOMsel (in distress)

Syntax

Try changing the code in the editor:

// Every tag has the same function:
tagName({attribute : 'value'}, ['content']);

// It's overloaded to accept only content:
tagName(['content']);
  
// And to accept a String with '#' and/or '.' for attributes
tagName('#id.class', ['content']);
  
// Content can be an arry of functions returning Strings
// or a single String
tagName([tagName('Single String'), tagName('Single String')])
   

Usage

There are three different ways of rendering DOMsel code

1. with(domsel)

Using with() is frowned upon, but arguably it has the prettier syntax

with(domsel) {
    var html = div('#id.class', [
        img({src: 'http://i.imgur.com/gnY75e2b.jpg', alt: 'An image'}),
        p('.imageText', 'This is text for an image')
    ]);
}

2. domsel.render()

You can pass a function to domsel's render method

var html = domsel.render(function () {
    return div('#id.class', [
        img({src: 'http://i.imgur.com/gnY75e2b.jpg', alt: 'An image'}),
        p('.imageText', 'This is text for an image')
    ]);
 });

3. domsel prefix

You can also use the domsel object directly for each function call

var html = domsel.div('#id.class', [
    domsel.img({src: 'http://i.imgur.com/gnY75e2b.jpg', alt: 'An image'}),
    domsel.p('.imageText', 'This is text for an image')
]);

var d = domsel;
var html = d.div('#id.class', [
    d.img({src: 'http://i.imgur.com/gnY75e2b.jpg', alt: 'An image'}),
    d.p('.imageText', 'This is text for an image')
]);