Package Exports

dom-gen

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dom-gen) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

dom-gen v1.2.1

Utility for dom generation, a jquery plugin

Idea

This tool is a shorthand of $('<tagName/>', opts). You can write it like tagName(opts) with this tool.

Install

npm install dom-gen

Usage

div()

import {div} from 'dom-gen'

div() // This creates an empty div element

The above calls is the same as $('<div/>'). You can chain jquery method calls like the following

div().text('Hello').appendTo('#main')

div(opts)

You can pass generation options as the parameter.

div({ data: { x: 0, y: 1 }, addClass: 'container', appendTo: '#main' })

The above is the same as:

$('<div/>', { data: { x: 0, y: 1 }, addClass: 'container', appendTo: '#main' })

or:

$('<div/>').data({ x: 0, y: 1 }).addClass('container').appendTo('#main')

Another example

img({ attr: { src: 'path/to/img' }, appendTo: '#some-place' })

is the same as:

$('<img/>').attr('src': 'path/to/img').appendTo('#some-place')

Supported tags

div
span
p
h1
h2
h3
h4
h5
h6
form
input
label
textarea
select
option
hr
br
ul
ol
li
small
big
strong
i
b
s
address
sub
sup
table
tr
th
td
dl
dt
dd
main
header
nav
aside
article
footer

Generic API

import domGen from 'dom-gen'

const xTag = domGen('x-tag') // This works as the same as other tag generators

Recipes

Complex construction

div().append(
  h2().text('Hello'),
  div().addClass('greeting').append(
    p().append(
      'Hello, this is ',
      span().addClass('green').text('example'),
      'page!'
    )
  )
)

License

MIT