All code examples with this icon are editable:
The first element of the array is the root html element which is going to contain all the child-elements. Those are arrays themselves and are structured as follows:
On the server you can install Shaven with npm:
Then require it in your scripts like this:
Now you can start using it by passing a JsonML-array to Shaven:
There are two different methods to insert a DOM-fragment into the DOM.
Firstly you can inject it straight into the DOM:
Secondly you can assign the Shaven-object to a variable and append the fragment later.
To get the HTML-fragment from the Shaven-object reference it with a
Both compiles to:
When you omit the html-tag it uses the default
div#test ist the same as
When an element with an id is created it automatically gets inserted into the return-object of the shaven function call. Therefore it can get easily referenced later on.
Reference an element without an id by using the
to assign it a reference-name.
All entries of an object will become the attributes.
If an object entry is
undefined the attribute will be an empty string.
If an entry is
false the attribute will not
be created at all.
If the style entry is an object it will automatically get compiled
to a string. This is especially useful for working with svgs, where
inline styles are still frequently used.
Values which are
undefined are deleted from the final style-string.
HTML-strings are escaped by default.
To disable escaping add a
& at the end of the element-tag string.
Shaven supports different namespaces and makes it therefore possible to create SVGs, MathML and various other XML-based languages.
When an element array contains an
or no content-value at all, the element will get compiled with an empty body.
When an element contains a
null or a
the element won't get compiled at all. This is handy for disabling parts
of templates or ensuring that no empty container-elements get rendered.
true value does therefore not change the compilation.)
In order to create reusable templates it's best practice to create a function
which accepts a data object, inserts the data into the JsonML array and
Finally iterate over the contacts and use one of the two insertion methods to build the DOM with the contacts.
You can provide a callback function, which will be called after the element has been created, with the element as the only argument. This functionality is especially suited to add event-listeners.