hill - creates an HTML fragment from a JSON object
This creates an HTML fragment from a JSON object.
A node is a JavaScript object with these keys:
tag
: the html tag, such asinput
children
: The children. Either an array or an object. The values can either be a string or another node. A string will be escaped.text
: Text to go inside the node, that will be escaped. If there are other children it will be appended to it.order
: The order of the children, if children is an object. An array of keys. Any that exist here but not inchildren
will be omitted. Any that exist in children but not here will be after the keys specified here.className
: the class attribute. It's given this alias becauseclass
is a reserved name in JavaScripthtmlFor
: the for attribute, useful for labels. It's given this aliasattrs
: html attributes. this can contain keys that have a special meaning for nodes (the above andattrs
itself). This is an object.- other keys: Anything that isn't reserved, as above, is an attribute. See the example below.
Hill escapes the HTML, but as it is in early development, one should take care when using user input to build the object. The author built this to use with tools like angular and Vue.js which operate on the HTML.
The attribute values are treated differently depending on their type:
null
adds a bare attribute, likedata-foo
in<hr data-foo>
true
adds a bare attribute, likechecked
in<input type="checkbox" name="foo" checked>
false
omits the attribute
Usage
var hill =var node =tag: 'div'children:input:tag: 'input'type: 'text'name: 'name'id: 'name'label:tag: 'label''for': 'name'text: 'Name: 'order: 'label' 'input'var html =console