dom-gen
v2.3.0
Utility for dom generation, a jquery plugin
0/weekUpdated 3 years agoMIT
Published by Yoshiya Hinosawa
npm install dom-gendom-gen v2.3.0  
> Utility for dom generation, a jquery plugin
Idea
This tool is a shorthand of $('. 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 $(' 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()
``js
import {div} from 'dom-gen'
div() // This creates an empty div element.
`
The above code is the same as $('
'). You can chain jquery method calls like the following`js
div().text('Hello').appendTo('#main')
`div(opts)
You can pass generation options as the parameter.
js
div({ data: { x: 0, y: 1 }, addClass: 'container', appendTo: '#main' })
`The above is the same as:
js
$('', { 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:
js
$('').data({ x: 0, y: 1 }).addClass('container').appendTo('#main')
`Another example
js
img({ attr: { src: 'path/to/img' }, appendTo: '#some-place' })
`is the same as:
js
$('![]()
').attr('src', 'path/to/img').appendTo('#some-place')
`div(opts, param0, [param1, ...])
You can pass additional params to
function and they are appended to the element.`js
div({addClass: 'main'}, div().text('Hello'), 'world!')
`is the same as the follwoing jquery call:
js
$('', {addClass: 'main'}).append($('').text('Hello'), 'world!')
`
which is equivalent of the following html:js
Helloworld!
`You can even omit first param
if it's empty.`js
div(p(span('Hello'), ' ', span('world!')))
`is equal to:
Hello world!
Supported tags
exports following tags by default for now. You can import them directly from dom-gen and use them as generator functions.`js
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.
js
import domGen from 'dom-gen'const xTag = domGen('x-tag')
xTag({addClass: 'foo'}, p('Hello')) // This is equivalent of Hello
`Recipes
Mix inline html and dom-gen composition
Inline elements are often better not to use dom-gen for creating.
js
p('Hello, this is example page!')
`is a bit better readable than:
p(
'Hello, this is ',
span({addClass: 'green'}, 'example'),
'page!'
)
Complex construction
js
import {div, h2, p} from 'dom-gen'div(
h2('Hello'),
div({addClass: 'greeting'},
p('Hello, this is example page!')
),
hr()
)
`is equivalent of the following html:
html
Hello
Hello, this is example page!
`Use with tagged template string
js
import {div, h2, p} from 'dom-gen'div(
h2
Hello,
div({addClass: 'greeting'},
pHello, this is example page!
),
hr()
)
License
MIT
Similar projects
- Ruby
- [Markaby][Markaby] Ruby
- [erector][erector] Ruby
- [Builder][Builder] Ruby
- [Nokogiri HTML Builder][Nokogiri HTML Builder] Ruby
- JavaScript
- [@cycle/dom][@cycle/dom] JavaScript
- [hyperscript-helpers][hyperscript-helpers] JavaScript
- [jm][jm] JavaScript
- [hyperscript][hyperscript] JavaScript
- [transform-react-jsx][transform-react-jsx] JavaScript
- [Elem][Elem] JavaScript
- [frzr][frzr] JavaScript
- CoffeeScript
- [space-pen][space-pen] CoffeeScript (Not maintained)
- [funcd][funcd] CoffeeScript
[space-pen]: https://github.com/atom-archive/space-pen
[hyperscript]: https://github.com/dominictarr/hyperscript
[funcd]: https://github.com/mgutz/funcd
[jm]: https://github.com/smtlaissezfaire/jm
[Markaby]: https://github.com/markaby/markaby
[Builder]: https://github.com/jimweirich/builder
[Nokogiri HTML Builder]: http://www.rubydoc.info/github/sparklemotion/nokogiri/Nokogiri/HTML/Builder
[erector]: https://github.com/erector/erector
[transform-react-jsx]: https://babeljs.io/docs/plugins/transform-react-jsx/
[Elem]: https://github.com/mathieuancelin/Elem
[frzr]: https://frzr.js.org/
[@cycle/dom]: https://github.com/cyclejs/dom
[hyperscript-helpers]: https://github.com/ohanhi/hyperscript-helpers