Extension of the native DOM createElement method to match JSX
npm install create-element-extended
Extends document.createElement to conform to the target API of JSX transpilation.
``js`
var element = document.createElement(tagName[, attributes[, children]])
This package is useful when frequently creating DOM nodes on the fly, e.g.:
`js
function makeSpinner(id) {
const div = document.createElement('div');
div.id = id;
div.classList.add('sk-folding-cube');
const cube1 = document.createElement('div');
cube1.classList.add('sk-cube1')
cube1.classList.add('sk-cube')
const cube2 = document.createElement('div');
cube2.classList.add('sk-cube2')
cube2.classList.add('sk-cube')
const cube3 = document.createElement('div');
cube3.classList.add('sk-cube3')
cube3.classList.add('sk-cube')
const srOnly = document.createElement('span')
srOnly.classList.add('sr-only');
srOnly.textContent = 'Loading...';
div.appendChild(cube1);
div.appendChild(cube2);
div.appendChild(cube3);
div.appendChild(srOnly);
return div;
}
`
becomes
`js
import 'create-element-extended';
function makeSpinner(id) {
return document.createElement('div', { id, 'class': 'sk-folding-cube' }, [
document.createElement('div', { 'class': 'sk-cube1 sk-cube' }),
document.createElement('div', { 'class': 'sk-cube2 sk-cube' }),
document.createElement('div', { 'class': 'sk-cube3 sk-cube' }),
document.createElement('span', { 'class': 'sr-only' }, 'Loading...'),
]);
}
`
When using babel and babel-plugin-transform-react-jsx you can use JSX,
which transpiles to the example above.
`js
/ pragma: document.createElement /
import 'create-element-extended';
function makeSpinner(id) {
return (
Instead of setting
pragma via comment, you can configure babel globally via .babelrc:`json
{
"plugins": [
["transform-react-jsx", {
"pragma": "document.createElement"
}]
]
}
`FAQ
$3
`js
import { createElement } from 'create-element-extended/library'
/ pragma: createElement /
`$3
`html
`
-- or --`html
`$3
`ts
function (tagName: string, attributes: object, children: string | Array): Element
`$3
`js
import { JSDOM } from 'jsdom';
import { createCreateElement } from 'create-element-extended/factory';const { window: { document } } = new JSDOM();
const createElement = createCreateElement(
tagName => document.createElement(tagName),
text => document.createTextNode(text),
);
`$3
This package does less. All I wanted was to create a DOM node.Here is (almost) the entire source code:
`js
export const createCreateElement = (createElement, createTextNode) => {
function appendChild(c) {
if (typeof c === 'string') this.appendChild(createTextNode(c));
else this.appendChild(c);
} return (tagName, attributes, children) => {
const el = createElement(tagName);
for (const attr in attributes) el.setAttribute(attr, attributes[attr]);
if (children) {
if (typeof children === 'string') {
el.appendChild(createTextNode(children));
} else if (children.length) {
const copy = Array.prototype.slice.call(children, 0);
Array.prototype.forEach.call(copy, appendChild, el);
} else {
el.appendChild(children);
}
}
return el;
};
};
``