Programming

DOM Element Creation

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

Traditional

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" );
table.style.cssText = "border: 2px inset #336699;"
 
var row = document.createElement( "tr" );
row.className = "exampleRow";
 
var cell = document.createElement( "td" );
cell.align = "center";
cell.style.cssText = "color: red;";
cell.appendChild( document.createTextNode( "I was created traditionally!" ) );
 
row.appendChild( cell );
table.appendChild( row );
 
document.body.appendChild( table );

ActiveDom

The ActiveDom contains a method of creating DOM elements easily. It has been adopted from MochiKit and a script found on the amix.dk 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 );
  • http://amix.dk/blog/viewEntry/19199
  • http://mochikit.com/doc/html/MochiKit/index.html

ActiveDom.setAttributes

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"})

or

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

JsonDom

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 ) );
  • http://dohpaz.com/flydom/

Micro-Templates

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