Text is rendered as a textnode.
Object literals are rendered as pretty JSON. null renders nothing.
ax([
'TEXT',
null,
{one: 1, two: 2, three: 3},
])The tag builder provides a shorthand syntax.
a[Nodespec](Content, Properties)Where a Nodespec is like 'h1#anId.aClass.anotherClass[attibute="value"]'.
This example creates three equivalent <p class="abc"> elements.
ax((a) => [
a['p.abc']('one'),
a.p('two', {class: 'abc'}),
a({$tag: 'p', $text: 'three', class: 'abc'}),
]);The Content argument can be text, a node, an array of content, a function that return content or an object.
ax((a) => [
a.h5('Your score?'),
a.form([
a['input[name="score"][type="number"]'],
a['button[type="submit"]']('Submit'),
], {
$on: {submit: (el) => (evt) => alert('Form submitted!')},
action: '/test',
method: 'POST',
}),
]);The tag builder ! method renders raw HTML.
Empty elements can be created using a[Nodespec] alone, as above with a['input[name="score"][type="number"]']. Similarly, create a horizontal rule with a['hr'], or just a.hr.
ax((a) => [
a['!']('<strong>HTML</strong>'),
a.hr,
])