dom-create-element-query-selector/es/index.js

A utility function to create DOM elements with CSS selector-like syntax

/**
 * Create a DOM element from a CSS query with option to include content
 *
 * @author Laurent Blanes <laurent.blanes@gmail.com>
 * @param {String} querySelector (optional) default to div
 * @param {...*} [content] (optional) String|Number|DOMElement
 * @return DOMElement
 *
 * @example
 * - createElement(); // <div>
 * - createElement('span#my-id.my-class.second-class'); // <span id="my-id" class="my-class second-class">
 * - createElement('#my-id.my-class.second-class', 'text to insert', 12345); // <div id="my-id" class="my-class second-class">
 * - const div = createElement('#my-div',
 *     'Random text',
 *     createElement('p.paragraph', 'my text'),
 *     createElement('p.paragraph', 'my second text'),
 *     createElement('a.link[href=https://github.com/hekigan/create-element]', 'link to a site'),
 * ); // <div id="my-id" class="my-class second-class">
 *    //   Random text
 *    //   <p class="paragraph">my text</p>
 *    //   <p class="paragraph">my second text</p>
 *    //   <a class="link" href="https://github.com/hekigan/create-element" class="paragraph">link to a site</a>
 *    // </div>
 */
export default function createElement() {
    var querySelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'div';

    var nodeType = querySelector.match(/^[a-z]+/i);
    var id = querySelector.match(/#([a-z]+[a-z0-9-]*)/gi);
    var classes = querySelector.match(/\.([a-z]+[a-z0-9-]*)/gi);
    var attributes = querySelector.match(/\[([a-z][a-z-]+)(=['|"]?([^\]]*)['|"]?)?\]/gi);
    var node = nodeType ? nodeType[0] : 'div';

    if (id && id.length > 1) {
        throw CreateElementException('only 1 ID is allowed');
    }

    var elt = document.createElement(node);

    if (id) {
        elt.id = id[0].replace('#', '');
    }

    if (classes) {
        var attrClasses = classes.join(' ').replace(/\./g, '');
        elt.setAttribute('class', attrClasses);
    }

    if (attributes) {
        attributes.forEach(function (item) {
            item = item.slice(0, -1).slice(1);

            var _item$split = item.split('='),
                label = _item$split[0],
                value = _item$split[1];

            if (value) {
                value = value.replace(/^['"](.*)['"]$/, '$1');
            }
            elt.setAttribute(label, value || '');
        });
    }

    for (var _len = arguments.length, content = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        content[_key - 1] = arguments[_key];
    }

    content.forEach(function (item) {
        if (typeof item === 'string' || typeof item === 'number') {
            elt.appendChild(document.createTextNode(item));
        } else if (item.nodeType === document.ELEMENT_NODE) {
            elt.appendChild(item);
        }
    });

    return elt;
}

function CreateElementException(message) {
    this.message = message;
    this.name = 'CreateElementException';
}
module.exports = exports['default'];