makeElement

Compact, fast, dependency-free function to use instead of document.createElement

npm install --save makeelement

const makeElement = require('makeelement');

It also creates a global variable makeElement in non-CJS environment.

<script src="makeelement.js"></script>
<script>
const element = makeElement('div');
</script>

Usage

makeElement accepts a tag name and its properties or properties object only which can include tagName property (div by default).

const element = makeElement('div', {
    className: 'foo',
    hidden: false
});

const element = makeElement({
    tagName: 'div'
    className: 'foo',
    hidden: false
});

The function also allows to define attributes, children, style and dataset simultaneously. children, in their turn, may include their own children and its item can also be a DOM node.

const element = makeElement('div', {
    attributes: {
        foo: 'a',
        bar: 'b'
    },
    children: [{
        tagName: 'div',
        className: 'child-1'
    }, {
        tagName: 'div',
        className: 'child-2',
        children: [{
          tagName: 'div',
          className: 'grand-child',
          children: [{
            tagName: 'div',
            className: 'grand-grand-child',
          }]
        }]
    }],
    dataset: {
        foo: 'a',
        bar: 'b'
    },
    style: {
        position: 'absolute',
        backgroundColor: 'red'
    }
});