DOMBrew
You probably should be using client-side templating instead of building DOM directly. If not, here is DOMBrew, a tiny dom builder:
# alias to a short variable
$b = DOMBrew
build nodes
# build with css-like selector, (optional) text content, and attributes
node = $b "a#my-id.some-class", "hello world!", href: "/hello.html"
# classes will be flattened and joined, data- will be hyphenized
node = $b "#cont", class: ["cls1", "cls2"], data: { someProp: "hi", dat2: "hello" }
# use .text to build a text node
node = $b.text('hello world!') # <- builds a text node
# same as
node = $b('', 'hello world!') # <- builds a text node
# you can wrap a dom element as $b node
$b document.getElementById("my-elem") # <- 1 DOM node
$b(nodes... or [nodes...]) # <- wrap multiple DOMBrew nodes (uses awesome DocumentFragment internally)
append / prepend children
# append / prepend children ($b nodes and / or dom elements)
node.append(children... or [children...])
node.prepend(children... or [children...])
get the data
node.dom() # result as DOM
node.html() # result as html in a string
jQuery
# .$() to get as jquery node: node.$()
$b::$ = -> $ @dom()
$b.text('hello').$().wrap('<p>').appendTo(document.body)
More examples
$b('form#search-user-by-email')
.append(
$b 'input.autocomplete', name: 'email', type: 'text', data: { emailSrc: '/user-emails.json' }
$b 'button', 'Search', class: %w(btn btn-primary)
).html()
# <form id="search-user-by-email">
# <input class='autocomplete' name='email' type='text' data-email-src='/user-emails.json'>
# <button class='btn btn-primary'>Search</button>
# </form>
# prepend / append
$b(document.getElementById 'item-title')
.prepend($b 'button.icon.fav-star', title: 'Add to favourites')
.append($b 'button.hide', 'Hide')
# get
$b('#container').html() # "<div id="container"></div>"
$b('#container').dom() # HTMLDivElement
Inspiration
- DOMBrew started off as a CoffeeScript rewrite of skyzyx's DOMBuilder https://github.com/skyzyx/dombuilder
Contribute
Tests are in test.html
You will need node and coffee-script installed:
- Follow these instructions to install node and npm: https://github.com/joyent/node/wiki/Installation
- npm install -g coffee-script