Skip to content
A fast 2.5 KB client-side DOM builder
CoffeeScript Shell
Find file
New pull request
Latest commit a00bc2a @glebm changelog: ie11 fix
Failed to load latest commit information.
test fix for ie11
.gitignore v1.0 changelog: ie11 fix fix for ie11
bower.json fix for ie11 fix for ie11
dombrew.js fix for ie11 fix for ie11
dombrew.min.js fix for ie11


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


# .$() to get as jquery node: node.$()
$b::$ = -> $ @dom()

More examples

    $b 'input.autocomplete', name: 'email', type: 'text', data: { emailSrc: '/user-emails.json' }
    $b 'button', 'Search', class: %w(btn btn-primary)

# <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



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

Something went wrong with that request. Please try again.