| Method | Example | Detail |
|---|---|---|
| createElement(tagName: string, properties: {} = {}, attributes?: {}) |
const div = createElement('div', { innerHTML: "I am some content" })
|
createElement creates an element with the supplied tag. It contains two optional objects which can be used to send one or more HTML properties or attributes. For convenience, you can send attributes on the properties object ( |
| createHtml(html: string, inline = false) |
const element = createHtml('<div>Some content</div>')
|
createHtml creates an element from a string of raw HTML. There are some limitations here, because it must always return an HTMLElement. This means if you give it HTML for multiple elements (a string of three DIVs, for example) or zero elements (the string "Hello World" for example), it returns those inside a wrapper DIV (if inline is false) or SPAN (if inline is true). If you give it HTML for a single element, it returns that element. |
| createFragment(html: string) |
const fragment = createFragment('<div>Some content</div>')
|
createFragment creates a DocumentFragment from whatever HTML you give it. |
|
anchor(innerHtml: string, href: string, properties?: {}, attributes?: {}) anchor(innerHtml: string, properties?: {}, attributes?: {}) anchor(properties?: {}, attributes?: {}) |
const a = anchor('Click here!', 'https://github.com/hachiko-8ko/ichigo-demo' )
|
Creates an anchor tag. Accepts keyword arguments. |
|
button(innerHtml: string, properties?: {}, attributes?: {}) button(properties?: {}, attributes?: {}) |
const btn = button('Click here!', { id: 'myButton' })
|
Creates a button tag. Accepts keyword arguments. |
|
div(innerElement: HTMLElement, properties?: {}, attributes?: {}) div(innerHtml: string, properties?: {}, attributes?: {}) div(properties?: {}, attributes?: {}) |
const mydiv = div(btn, { id: myDiv' })
|
Create a div tag. You can supply inner HTML or another HTMLElement to populate as content. Accepts keyword arguments. |
| paragraph(innerHtml: string, properties?: {}, attributes?: {}) paragraph(properties?: {}, attributes?: {}) |
const p = paragraph('Some text')
|
Create a p tag having supplied content. Accepts keyword arguments. |
|
span(innerElement: HTMLElement, properties?: {}, attributes?: {}) span(innerHtml: string, properties?: {}, attributes?: {}) span(properties?: {}, attributes?: {}) |
const s = span('Some inner content')
|
Create a span tag. You can supply inner HTML or another HTMLElement to populate as content. Accepts keyword arguments. |
| deleteNodeContent(node: Node) |
deleteNodeContent(myDiv)
|
Delete all the content of an HTML element. |
| extractNodeContent(node: Node) |
const frag = extractNodeContent(myDiv)
|
Remove the content of an HTML element and return it as a DocumentFragment. |
| escapeHtml(input: string) |
const html = escapeHtml('A <= B')
|
Return the input string with HTML characters escaped. |
| getFormFieldValue(element: HTMLElement) |
const name = getFormFieldValue(document.querySelector('input#name'))
|
Extract the form field value from an input, checkbox, select (single or multiple), radio, or textarea. Each of these has a slightly different HTML5 API, but this function transforms it into a string (most cases), boolean (checkbox), number (input with type numeric), or string array (multiple select). |
| setFormFieldValue(element: HTMLElement, value: FormFieldValue) |
setFormFieldValue(mySelectBox, ['red', 'green'])
|
Set the value of an input, checkbox, select (single or multiple), radio, or textarea. Each of these has a slightly different HTML5 API, but this function allows you to treat them all as a simple value operation. |
| nodeListSelector(nodes: NodeList | Node[], selector: string) |
const firstblue = nodeListSelector(inputs, '.blue')
|
nodeListSelector is a version of element.querySelector() that can work on a NodeList (which is the output of querySelectorAll) or a node array. |
| nodeListSelectorAll(nodes: NodeList | Node[], selector: string) |
const allblue = nodeListSelector(inputs, '.blue')
|
nodeListSelectorAll is a version of element.querySelectorAll() that can work on a NodeList (which is the output of querySelectorAll) or a node array. |