npm install --save declaredom
import { div, h3, span, br, button } from 'declaredom'
document.body.appendChild(
div([
h3('Declarative syntax'),
span('For DOM Elements'),
br(),
button({ onClick: console.log }, 'Click me')
])
)
The API is very similar to r-dom's, except that it returns real HTMLElement
s
This doc assumes the library uses the default import as import d from 'declaredom'
. The function is variadic:
Returns an HTMLElement
-
tagName
String
- An HTMLElement tag name -
innerText
String
- The innerText of the element
Returns an HTMLElement
-
tagName
String
- An HTMLElement tag name -
children
Array[HTMLElement]
- An array of HTMLElements
Returns an HTMLElement
-
tagName
String
- An HTMLElement tag name -
properties
Object
- An object with property/value pairs -
innerText
String
- The innerText of the element
Returns an HTMLElement
-
tagName
String
- An HTMLElement tag name -
properties
Object
- An object with property/value pairs -
children
Array[HTMLElement]
- An array of HTMLElements
Declaredom also supports text nodes and document fragments:
import { div, span, fragment, text, br } from 'declaredom'
document.body.appendChild(
div([
span('foobar'),
// this is a document fragment
fragment([
br(),
text('This is a text node'),
br()
]),
span('bazqux')
])
)
-
properties
{ id: 'foo', style: { fontSize: '12px' }, className: 'bar', classSet: { toggled: true } }
-
children
[span('foo'), span('bar'), span('baz')]