rdom

rdom is a simple function that simplifies DOM element creation.

API

rdom :: String -> Object -> [DOM] -> DOM

rdom is a curried function that takes a String document-element name, an object that maps its keys to the element's attributes, amd an Array of child elements. You may also include a plaintext String in the child elements Array, and it will be converted to a text node. rdom returns a DOM tree, with the specified tag at the root.

A number of functions are defined as properties on the rdom function. These are simply partially applied calls to rdom with just the tag name. This generates functions of the type Object -> [DOM] -> DOM. rdom includes div, h1, input, p, and several others. This is merely a convenience, so it is easy to write code like this:

var tree = rdom.div({id: 'main'}, [
  rdom.p({}, ["Imagine your ad here"]),
  rdom.ul({className: 'mainlist'}, [
    rdom.li({}, ["First LI"]),
    rdom.li({className: 'active'}, ["Second LI"]),
    rdom.li({}, ["Third LI"])
  ])
]);

This produces a DOM tree that looks like this:

<div id="main">
  <p>Imagine your ad here</p>
  <ul class="mainlist">
    <li>First LI</li>
    <li class="active">Second LI</li>
    <li>Third LI</li>
  </ul>
</div>

---

Originally inspired by Christian Johansen's talk Pure, Functional JavaScript.