hacking and gonzo since 2000

More readable JavaScript code

I feel like not many understood my DOM enlightenment trick. Here is a "real world" rewrite.

The code before:

var dt_equ = DT('Equipments'); 
ACN(dl, dt_equ);
var dd_equ = DD();
ACN(dl, dd_equ);
var select = this._createSelect(Equipments, 'equ');
this._addOnChange(select, this.loadEqu);
ACN(dd_equ, select);

this.equ_holder = DIV();
ACN(dd_equ, this.equ_holder);

The code after:

var select = this._createSelect(Equipments, 'equ');
this._addOnChange(select, this.loadEqu);

ACN(dl, DT('Equipments'),
    DD(select, this.equ_holder = DIV())
);

Equivalent code, the later is just much more readable.

Here is how standard DOM approach would look like:

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

var dd_equ = document.createElement('dd'); 
dl.appendChild(dd_equ);

var select = this._createSelect(Equipments, 'equ');
this._addOnChange(select, this.loadEqu);
dd_equ.appendChild(select);

this.equ_holder = document.createElement('div');
dd_equ.appendChild(this.equ_holder);

Oh, horror :)

Code · Code improvement · JavaScript · Tips • 17. Jun 2007