DOM Element Creation

This document describes the different methods of creating rich DOM objects with ActiveDom.


This is an expample of DOM element creation in the traditional manner. Nothing special, use of innerHTML as been excluded as it is a non-standard method developed by Microsoft.

var table = document.createElement( "table" );
table.setAttribute( "width", "718" ); = "border: 2px inset #336699;"
var row = document.createElement( "tr" );
row.className = "exampleRow";
var cell = document.createElement( "td" );
cell.align = "center"; = "color: red;";
cell.appendChild( document.createTextNode( "I was created traditionally!" ) );
row.appendChild( cell );
table.appendChild( row );
document.body.appendChild( table );


The ActiveDom contains a method of creating DOM elements easily. It has been adopted from MochiKit and a script found on the website. A series of methods are used to create rich results.

var headerText = "Test Header";
var paragraphText = "Test of some text in a paragraph. This should be long enough.";
var nodes = TABLE({ width: '718px', style: 'border: 2px inset #336699;' }, 
		TR({ className: 'exampleRow' }, 
			TD( { align: 'center', style: 'color: red;' }, 'I was created by createAppend()!' )
document.body.appendChild( nodes );


You can also use the method for setting attributes to nodes. This is an internal function but is very well suited for any type of use.

ActiveDom.setAttributes( document.getElementByTagName( "body" )[ 0 ], {className: "test", id: "bodyTag"})


document.getElementByTagName( "body" )[ 0 ].setAttributes( {className: "test", id: "bodyTag"} )


The ActiveDom also contains a JSON style automated object creation method. The syntax is directly borrowed from FlyDOM.

var DomObjectNotation = [
	'table', { width: '718px', style: 'border: 2px inset #336699;' }, [
		'tr', { className: 'exampleRow' }, [
			'td', { align: 'center', style: 'color: red;' }, 'I was created by createAppend()!'
document.body.appendChild( ActiveDom.json( DomObjectNotation ) );


Micro-Templating developed by John Resig intregrated into this ActiveDom package. Example and class still needs to be modified and completed.