Dom-gen NPM | npm.io

dom-gen v2.3.0

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 such as div({data: {key: 'value'}}) for example.

See the slide "Things You Might Not Know About jQuery" by John Resig. This slide explains how $('<tagName/>', opts) works in details.

Install

npm install dom-gen

Usage

NOTE dom-gen supposes $ is exposed in global namespace. You need to put jquery on global namespace first.

div()

import {div} from 'dom-gen'

div() // This creates an empty div element.

The above code 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' })

(See the slide "Things You Might Not Know About jQuery" which explains what the above code means in jQuery.)

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')

div(opts, param0, param1, ...)

You can pass additional params to div function and they are appended to the element.

div({addClass: 'main'}, div().text('Hello'), 'world!')

is the same as the follwoing jquery call:

$('<div/>', {addClass: 'main'}).append($('<div/>').text('Hello'), 'world!')

which is equivalent of the following html:

<div class="main"><div>Hello</div>world!</div>

You can even omit first param opts if it's empty.

div(p(span('Hello'), ' ', span('world!')))

is equal to:

<div><p><span>Hello</span> <span>world!</span></p></div>

Supported tags

dom-gen exports following tags by default for now. You can import them directly from dom-gen and use them as generator functions.

a()
abbr()
address()
area()
article()
aside()
audio()
b()
base()
bdi()
bdo()
blockquote()
body()
br()
button()
canvas()
caption()
cite()
code()
col()
colgroup()
data()
datalist()
dd()
del()
details()
dfn()
dialog()
div()
dl()
dt()
em()
embed()
fieldset()
figcaption()
figure()
footer()
form()
h1()
h2()
h3()
h4()
h5()
h6()
head()
header()
hr()
html()
i()
iframe()
img()
input()
ins()
kbd()
keygen()
label()
legend()
li()
link()
main()
map()
mark()
math()
menu()
menuitem()
meta()
meter()
nav()
noscript()
object()
ol()
optgroup()
option()
output()
p()
param()
picture()
pre()
progress()
q()
rb()
rp()
rt()
rtc()
ruby()
s()
samp()
script()
section()
select()
small()
source()
span()
strong()
style()
sub()
summary()
sup()
svg()
table()
tbody()
td()
template()
textarea()
tfoot()
th()
thead()
time()
title()
tr()
track()
u()
ul()
var()
video()
wbr()

Create your own

You can create the generator for your own tag.

import domGen from 'dom-gen'

const xTag = domGen('x-tag')

xTag({addClass: 'foo'}, p('Hello')) // This is equivalent of <x-tag class="foo"><p>Hello</p></x-tag>

Recipes

Mix inline html and dom-gen composition

Inline elements are often better not to use dom-gen for creating.

p('Hello, this is <span class="green">example</span> page!')

is a bit better readable than:

p(
  'Hello, this is ',
  span({addClass: 'green'}, 'example'),
  'page!'
)

Complex construction

import {div, h2, p} from 'dom-gen'

div(
  h2('Hello'),
  div({addClass: 'greeting'},
    p('Hello, this is <span class="green">example</span> page!')
  ),
  hr()
)

is equivalent of the following html:

<div>
  <h2>Hello</h2>
  <div class="greeting">
    <p>Hello, this is <span class="green">example</span> page!</p>
  </div>
  <hr/>
</div>

Use with tagged template string

import {div, h2, p} from 'dom-gen'

div(
  h2`Hello`,
  div({addClass: 'greeting'},
    p`Hello, this is <span class="green">example</span> page!`
  ),
  hr()
)