Cr.elm Conversion from HTML and Verifier

Please remember: as always when appending elements, it is best to put them all as a child node of some parent node, and then append the parent node thus appending all of the nodes at once and generating fewer events and CPU stress!

Input HTML
<div style="color:black;"><h1>Cr.elm - innerHTML be Gone!</h1> <img src="../Cr.png" onclick="clickFunctionTest()" class="ie reserved word test" var="ie reserved word test" alt="Javascript CreateElement Library Cr.elm" style="float:right;height:67px;width:500px;"/> <h3>Simplifying document.createElement</h3> Imagine you have to create a bunch of elements using javascript. Go ahead imagine it, I'll wait. Sure you could just use .innerHTML, or you could use JQuery .html - however then your HTML code string must be parsed into elements. <br/><br/> For the sake of elegance and simplicity and "correct" attachment of events you should be using document.createElement then document.body.appendChild; EXCEPT what a god awful amount of writing and lines of code and space that takes up. <br/><br/> Instead using the elm function of the Cr library one can create and nest nodes with ease! <br/><br/></div>
Trim Whitespace and Replace With Make Tidy ChildNodes as Attributes Quote All Attributes (JSON)

Input Cr Code

how to use

Simply include the appropriate Cr libraries to your document and then add the javascript code generated to a script tag.

document.body must exist for these to work, so it is simplest to add the script tag to the body tag

for extra assurance don't run your script until the onload or DOMNodeInserted event fires.

How to use Cr Javascript Function Calls
<script type="text/javascript" src="Cr_min.js"></script> <script type="text/javascript"> //paste your generated HTML to Cr.elm JS Function code here in place of the following example var mydiv=Cr.elm('div',{style:'color:red'},[Cr.elm('Hello World')],document.body); mydiv.scrollIntoViewIfNeeded(); </script>
To use JS object or JSON string version the appropriate conversion function must be called.

Javascript Objects
<script type="text/javascript" src="Cr_min.js"></script> <script type="text/javascript" src="Cr-json_min.js"></script> <script type="text/javascript"> //paste your generated Javascript Object into the following variable CrJSONobject={elm:["div",{style:"color:red"},[{txt:["Hello World"]}],document.body]}; var node_s=Cr.fromJson(CrJSONobject); Cr.insertNodes(node_s,document.body); </script>
JSON Strings
<script type="text/javascript" src="Cr_min.js"></script> <script type="text/javascript" src="Cr-json_min.js"></script> <script type="text/javascript"> //paste your generated JSON into the following string variable // (between single quotes CrJSONstring='... ...';) CrJSONstring='{"elm":["div",{"style":"color:red"},[{"txt":["Hello World"]}],"document.body"]}'; var node_s=Cr.fromJsonString(CrJSONstring); Cr.insertNodes(node_s,document.body); </script>

converstion cevats - legacy events

If you had complex events like this you may be in for a bit of a shock

<a href="#" onclick="handleClick(this,event,myvariable)">link</a>

It will be much simplified by Cr to simply pass the event to the function, something like this:

<a href="#" onclick="handleClick(event)">link</a>

The reasons for this are simply the nature of elm.addEventListener('click',fn,useCapture); does not allow function parameters.

You may have to use some helper functions to get the event's target or srcElement (to get the "this" passed above)

Here are the helper functions followed by an example of your new handleClick function:

function getEventTarget(ev){ ev = ev || event; var targ=(typeof(ev.target)!='undefined') ? ev.target : ev.srcElement; if(targ !=null){ if(targ.nodeType==3) targ=targ.parentNode; } return targ; } function preventEventDefault(ev){ ev = ev || event; if(ev.preventDefault)ev.preventDefault(); ev.returnValue=false; return false; } function stopEventPropagation(ev){ ev = ev || event; if(ev.stopPropagation)ev.stopPropagation(); ev.cancelBubble=true; ev.cancel=true; } function cancelEvent(e){ e = e ? e : window.event; if(e.stopPropagation) e.stopPropagation(); if(e.preventDefault) e.preventDefault(); e.cancelBubble = true; e.cancel = true; e.returnValue = false; return false; } function handleClick(ev){ ev = ev || event; clickedElement = getEventTarget(ev); /*your code goes here, optionally; to cancel the event as needed (below).*/ //stopEventPropagation(ev); //return preventEventDefault(ev); //return cancelEvent(ev);//performs both stopPropogation and preventDefault }