Create Element Extended
Extends document.createElement
to conform to the target API of JSX transpilation.
var element = document
This package is useful when frequently creating DOM nodes on the fly, e.g.:
{ const div = document; divid = id; divclassList; const cube1 = document; cube1classList cube1classList const cube2 = document; cube2classList cube2classList const cube3 = document; cube3classList cube3classList const srOnly = document srOnlyclassList; srOnlytextContent = 'Loading...'; div; div; div; div; return div;}
becomes
; { return document;}
When using babel and babel-plugin-transform-react-jsx
you can use JSX,
which transpiles to the example above.
/* pragma: document.createElement */ ; { return <div id=id class="sk-folding-cube"> <div class="sk-cube1 sk-cube"></div> <div class="sk-cube2 sk-cube"></div> <div class="sk-cube3 sk-cube"></div> <span class="sr-only">Loading...</span> </div> ;}
Instead of setting pragma
via comment, you can configure babel globally via .babelrc
:
FAQ
I don't like monkey-patching...
Import the library funtion instead:
/* pragma: createElement */
How do I use this without webpack, browserify?
Monkey-patch:
Library:
jsdom
or other DOM implementations?
How do I use this with ;; const window: document = ; const createElement = ;
jsx-dom
, jsx-create-element
, nativejsx
, and jsx-foobar
?
How is this different from This package does less. All it does is to create a DOM node.
Why not jQuery?
Courage.