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;
};
};
``

$3

Courage.

$3

Because all I wanted was to create a DOM node.

$3

Cool.