var FeHelper = window.FeHelper || {}; FeHelper.elemTool = { /******************************************************************************* Usage A: elemTool.elm('div',{'id':'hello','event':['click',function(){alert('hi');}]},[ elemTool.txt('text inside block element'), elemTool.elm('hr',{'style':'clear:both;'}) ],document.body); Usage B: var myelm = elemTool.elm('div',{'id':'hello','event':['click',function(){alert('hi');}]},[ elemTool.txt('text inside block element'), elemTool.elm('hr',{'style':'clear:both;'}) ]); document.body.appendChild(myelm); OR elemTool.insertNode(myelm, document.body); Creates:
text inside block element
Where clicking the text or hr displays 'hi' Pattern: elemTool.elm('div',{'attribute':'one'},[elemTool.txt('children')],document.body);
children
Conclusions: you may nest elemTool.elm calls in exactly the same way as you would nest HTML elements. Parameters: nodeType node type such as 'img' 'div' or 'a' attributes an object {} that contains attributes. Once special attribute 'events' may be used to specify events as follows: {'href':'#','events':[['mouseover',callfn,false],['mouseout',callfn2]]} to ensure these listeners are attached see appendTo below. the format for events is [eventType,callback,useCapture], you may also specify a single event. See appendTo below for event attachment info 'loadevents' may be used to specify early attach events as follows: {'loadevents':[['load',loadedFn,false],['load',loadedFn2]],'src':'img.png'} load events are attached immediately in the order they are processed. If you wish load events to be attached before src is defiend to counter an IE but where cached images load event fires immediately, then sepecify loadevents before src addchilds an array [] containing nodes to be appended as children, could contain an array of calls to elemTool.elm which create this array of nodes. appnedTo should ONLY be specified on the last element that needs to be created which means the TOP level element (or the final parameter on the first or outter most call to elemTool.elm). Empty Patteren: elemTool.elm('div',{},[],document.body); *******************************************************************************/ elm : function(nodeType,attributes,addchilds,appnedTo){ var ne=document.createElement(nodeType),i,l; if(attributes){ if( attributes.event || attributes.events ){ var lev=attributes.event || attributes.events; if(typeof(lev[0])=='string') ne.addEventListener(lev[0],lev[1],lev[2]); else if(lev.length) for(i=0,l=lev.length;i]|"[^"]*"|'[^']*')*>/gmi, ''); temp.innerHTML = str; var result = temp.childNodes[0].nodeValue; this.empty(temp); return result; } }