Skip to content
A fast 2.5 KB client-side DOM builder
CoffeeScript Shell
Latest commit a00bc2a Mar 8, 2014 @glebm changelog: ie11 fix
Failed to load latest commit information.
test fix for ie11 Mar 8, 2014
.gitignore v1.0 May 29, 2011
CHANGES.md changelog: ie11 fix Mar 8, 2014
README.md fix for ie11 Mar 8, 2014
bower.json fix for ie11 Mar 8, 2014
build.sh fix for ie11 Mar 8, 2014
dombrew.js fix for ie11 Mar 8, 2014
dombrew.js.coffee fix for ie11 Mar 8, 2014
dombrew.min.js fix for ie11 Mar 8, 2014

README.md

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

Contribute

Tests are in test.html You will need node and coffee-script installed:

Something went wrong with that request. Please try again.