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 append
ed 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()
)
License
MIT
Similar projects
- Ruby
- Markaby Ruby
- erector Ruby
- Builder Ruby
- Nokogiri HTML Builder Ruby
- JavaScript
- @cycle/dom JavaScript
- hyperscript-helpers JavaScript
- jm JavaScript
- hyperscript JavaScript
- transform-react-jsx JavaScript
- Elem JavaScript
- frzr JavaScript
- CoffeeScript