Cr.elm Conversion from HTML and Verifier

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

and Replace With

Input Cr Code

Test Creates:

Note: Text nodes may not append correctly unless they are a child of a parent node since
Cr.txt never auto-appends to the DOM tree. In these rare cases you can use Cr.insertNode(Cr.txt("text content"),document.body)
Although it is recommended to encase your entire block in a div anyway to save on CPU and specify destination only once.

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

To use JS object or JSON string version the appropriate conversion function must be called.

Javascript Objects

JSON Strings

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: