Here is an annotated version of the code (part one of two):
/*DOM_b_input - HTML elements generation script
*creation Wizard © John Davenport Scheuer
*Visit http://www.dynamicdrive.com/forums
*user name:jscheuer1 - This notice must remain for legal use
*Annotations also © John Davenport Scheuer */
//Set document title
document.title="DOM_b_input - HTML elements generation script creation Wizard \xa9 John Davenport Scheuer"
//Write out the page
document.write('<h2>DOM_b_input - HTML elements generation script creation Wizard</h2>\n'+
'<pre style="color:green;background-color:white;display:inline;">\n'+
' \n'+
' /*DOM_b_input - HTML elements generation script \n'+
' *creation Wizard \xa9 John Davenport Scheuer \n'+
' *Visit http://www.dynamicdrive.com/forums \n'+
' *user name:jscheuer1 - This notice must remain for legal use */ \n'+
' \n'+
'</pre><br>\n'+
'<div>Input HTML Elements:</div>\n'+
'<textarea id="db" rows="5" cols="50">\n'+
'<p>"Example"</p>\n'+
'</textarea><br>\n'+
'<input type="button" value="domit" onclick="DOM_c();"><input type="button" value="reset" onclick="DOM_c(\'clear\');">\n'+
'<div id="dbdiv" style="display:none;"></div>\n')
function DOM_c(clear){ //function to clear form, reset global variables, and remove generated script, if any
t=0, c=1, bd=[], ap=[], bap=[];
if (document.getElementById('report')&&document.getElementById('report').parentNode)
document.getElementById('report').parentNode.removeChild(document.getElementById('report'));
if(clear)
document.getElementById('db').value='';
else{
document.getElementById('dbdiv').innerHTML=document.getElementById('db').value;
DOM_b()
}
}
function encamel(txt){ //function to convert hyphenated style properties to camel style notation
var txt=txt.toLowerCase(), ntxt='';
for (var i_tem = 0; i_tem < txt.length; i_tem++)
if (txt.charAt(i_tem)=='-'){
i_tem++;
ntxt+=txt.charAt(i_tem).toUpperCase();
}
else
ntxt+=txt.charAt(i_tem);
return ntxt;
}
//set variables - t to count text nodes, c to count and label tag nodes, array bd - each entry is a node's children
//array ab - each entry is an appendChild command for a node child, array bap - each entry is an appendChild for the body
var t=0, c=1, bd=[], ap=[], bap=[];
function DOM_b (node){ //The main function called for each element/node
//set variables - bd1 to hold a child nodes commands for construction, array nap to hold appendChild commands until they can
//be added to ap in the proper order, object bdom holds the element's children for analysis
var bd1='', nap=[], bdom=node? node.childNodes : document.getElementById('dbdiv').childNodes;
nap.length=0; //reset nap to 0 for each run
for (var i_tem = 0; i_tem < bdom.length; i_tem++){ //iterate over current node's children
//determine if this is a tag and if so, capture its tagName, if not capture 0 so we will know it isn't a tag later
var tag=bdom[i_tem].tagName? bdom[i_tem].tagName.toLowerCase() : 0 ;
//focus on tags only and reject unsuitable tags
if(tag&&tag!=='!'&&tag!=='style'&&(tag!=='script'||!bdom[i_tem].src||(bdom[i_tem].src&&bdom[i_tem].src.indexOf('DOM_b')<0))){
bdom[i_tem].ident='_node_'+c++; //set a unique identifier for this node
var theId=tag+bdom[i_tem].ident; //assign a variable name for the node using its unique id and tag name
if (node) //if this isn't the first run through (a child node) store an appendChild command for this child's child
//in the nap array
nap[nap.length]=node.tagName.toLowerCase()+node.ident+'.appendChild('+theId+');\n';
else //this is the first run through so the append command will be to the body and be stored in the bap array
bap[bap.length]='document.body.appendChild('+theId+');\n';
bd1+='\nvar '+theId+'=document.createElement(\''+tag+'\');\n'; //start loading up a text string with commands for this child
if (bdom[i_tem].attributes) //if this child has attributes
for (var i = 0; i < bdom[i_tem].attributes.length; i++){ //iterate over them
//grabbing the name and value of the attribute
var theName=bdom[i_tem].attributes[i].name.toLowerCase(), theValue=bdom[i_tem].attributes[i].value;
if(theValue.length>0&&theValue!=='null') //if the attribute has any real value perform further checks
if(bdom[i_tem].attributes[i].name.toLowerCase()=='style'){ //if the attribute is style,
var sar=theValue.split(';'); //parse out the property/value pairs to an array
for (var q = 0; q < sar.length; q++){ //iterate over this array,
var sarq=sar[q].split(':'); //parsing into another array individual property/value pairs
if (sarq[0].length>1) //if a given property isn't just a space or a single character or empty,
//write out a command to assign it and its value to the child and add that to the child's declaration string
bd1+=theId+'.style.'+encamel(sarq[0]).replace(/ /g, '')+'="'+sarq[1].replace(/ /g, '')+'";\n';
}
}
else if (theName.indexOf('on')==0) //if the attribute is an event, parse out its commands into
//a function and add assignment of this function to the event for the child's declaration string
bd1+=theId+'.'+theName+'=function(){\n'+theValue.replace(/;/g, ';\n')+'};\n';
else if (theName=='class') //if the attribute is class, format and add a declaration command
bd1+=theId+'.className="'+theValue+'";\n';