The Code - No Ifs, Ands, or Elses
OK, so it's not the most readable DOM builder function on the planet, but it sure is the smallest and is very easy to use. Note that I have split up all this stuff on multiple lines, it should be all on one line for maximum awesomeness. If you want to see another variation of this, check out: The World's Second Smallest DOM Builder.
The Complete DOM Builder Code
function $x(p,t){for(var i in t)typeof(t[i])=='object'?$x(p.appendChild(
document.createElement(i.split('_')[0])),t[i]):i=='s'?p.style.cssText=t[i]
:i=='t'?p.appendChild(document.createTextNode(t[i])):p[i]=t[i];return p}
Basic Usage Example
/*
Author:dave of mixd.net
Usage: newNode = $x(node, object);
node = node on which to appendChild the built-out DOM tree
object = DOM tree in JSON format
simple example:
*/
document.body.appendChild($x(document.createElement('h3'),{
s: 'font-size:24px',
t: 'Click ',
a: {
t: 'Here',
href: 'http://www.nowhere.com',
onclick: function(){alert(this.parentNode.innerHTML);return false;}
}
}));
Using the Builder ($x) Function:
Note that "x" is for "XML", the dollar-sign is just a prototype-style function prefix.
Look at the example below and you will see how to use this. Basically, the DOM
tree is represented as a single JavaScript Object. Object properties are translated directly to
Element properties, while Objects are interpreted as the elements
themselves. Special cases are the "t" property, which stands for "text" and "s"
which stands for style. (Yes I would have used "text" and "style" but that would have taken
7 extra characters.) It is faster to type anyway. To set a class, just use "className".
Since this is a giant object, we can't have two properties with the same name, so to
discern between them, just put an underscore followed by whatever you want. Everything after the
underscore will be ignored. i.e. "td_1" and "td_2" are both interpreted as "td" tags, and the number
following doesnt matter. It simply disambiguates (disambiguates?) the object property names.
Browser Testing
This function has been tested in IE6, IE 5.5, FireFox 1.0, FireFox 1.5, Netscape 7, and Opera 7 - I have no idea if it works in other browsers, but that will cover 98% of your audience. The only element that seems quirky is the "s" (actually the style.cssText) property. For this to work with Opera 7 you will just have to stick with the className property and use classes for all of your styles.
Advanced Usage Example
/*
Author:dave of mixd.net
Usage: newNode = $x(node, object);
node = node on which to appendChild the built-out DOM tree
object = DOM tree in JSON format
*/
//uncompressed code
function $x(p,t){
for(var i in t)
typeof(t[i])=='object'
?$x(p.appendChild(document.createElement(i.split('_')[0])),t[i])
:i=='s'
?p.style.cssText=t[i]
:i=='t'
?p.appendChild(document.createTextNode(t[i]))
:p[i]=t[i];
return p;
}
//compressed code
function $x(p,t){for(var i in t)typeof(t[i])=='object'?$x(p.appendChild(
document.createElement(i.split('_')[0])),t[i]):i=='s'?p.style.cssText=t[i]
:i=='t'?p.appendChild(document.createTextNode(t[i])):p[i]=t[i];return p}
//build and return the new node (created within a div element)
var newNode = $x(document.createElement('div'), {
h3:{
t:'<innerText>',
s:'color:red; font-size:20px; margin:0px;'
},
i:{
t:'italics',
b:{
t:'I am bold',
s:'border:1px #000 solid; color:blue; font-size:20px'
},
u:{
t:'bold2',
myProperty: 'test property',
onclick:function(){
alert(this.myProperty)
},
className:'red'
},
b_2:{innerHTML:'bold3'}
},
i_2:{
t: 'hey'
},
table:{
s:'width:100%;',
tbody:{
tr:{
td:{t:'word'},
td_1:{t:'word1'},
td_2:{t:'word2'},
td_3:{t:'word3'}
},
tr_2:{
td:{t:'word'},
td_1:{t:'word1'},
td_2:{t:'word2'},
td_3:{t:'word3'}
},
tr_3:{
td_1:{
className:'redBg',
colSpan:'2',
t:'word1'
},
td_2:{t:'word2'},
td_3:{
s:"border:1px #000 solid; color:blue;",
t:'word3'
}
}
}
}
});
//add the built-out DOM tree to the document
document.getElementById('testDiv').appendChild(newNode);
The code above creates a really ugly HTML table with some DIVs and stuff around it, and appends a child node to a div called "textDiv". The first parameter must be an HTML element. This example should demonstrate the power of this tiny function. You can view the source to see that the table seen below is not exactly HTML.