Magic DOM: Moving JavaScript forward

What does it do? Well, instead of doing this:

var dl = document.createElement('dl');
dl.className = 'my_dl';
var dt_equ = document.createElement('dt'); 
dt_equ.innerHTML = 'Equipments';
dt_equ.className = 'my_dt';
dl.appendChild(dt_equ);

You can do this with MagicDOM:

var dt_equ;
var dl = DL({'class': 'my_dl'},
    dt_equ = DT({'class': 'my_dt'}, 'Equipments'));

You could also write this:

SPAN({'class': 'babu'}, "Hello world")
->
<span class="babu">Hello world</span>

As you can see, the code gets more readable since it preserves the structure of HTML.

The syntax

Following DOM elements are supported:

• UL, LI, TD, TR, TH,
• TBODY, TABLE, INPUT, SPAN, B,
• A, DIV, IMG, BUTTON,
• H1, H2, H3, BR, TEXTAREA, FORM,
• P, SELECT, OPTION, OPTGROUP, IFRAME, SCRIPT,
• CENTER, DL, DT, DD, SMALL,
• PRE, TN

These are all functions that have following signature:

DOMSHORTCUT({properties}?, ("String" | DOMSHORTCUT)*)

I.e. you can do following calls:

LI({style: 'color: red'}, 'I am fluffy')
->
<li style="color: red">I am fluffy</li>

DIV(UL(LI('Hello', ' ', 'nasty')))
->
<div><ul><li>Hello nasty</li></ul></div>

Get started?

Download MagicDOM.js:

• MagicDOM.js

Source it:

<script type="text/javascript" src="MagicDOM.js"></script>

You are ready to go :)

Related posts

• Creating DOM elements the COOL way
• DOM enlightenment (JS trick)
• More readable JavaScript code

Credits

MagicDOM is developed by me, but the initial idea is taken from MochiKit. MagicDOM can also be found in AJS [my own JavaScript library].