Shorthand function for document.createElement, with added functionality... very similar to Reacts createElement :/ lol

readme.md

Shorthand function for document.createElement. Accepts and appends attributes directly to the newly created element and appends child element, if any.

Examples

let element = createElement('p');
let element = createElement('p', { title: 'parent' });
let element = createElement('p', { title: 'parent' }, []);
let element = createElement('p', null, [
    'This string will be added as text node'
]);

// You can alias createElement to make your code easier to read
let h = createElement;

let element = h('p', null, [ 
    h('a', { href: 'https://www.google.co.uk' })
    h('a', { href: 'https://www.lski.uk' })
]);

let element = h('ul', { title: 'parent' }, [ 
    h('li', { class: 'selected' }, [
        h('a', { href: 'https://www.google.co.uk' })
    ]),
    h('li', null, [
        h('a', { href: 'https://www.lski.uk' })
    ])
]);

createElement.js

/**
 * Shorthand function for document.createElement. Accepts and appends attributes to the newly created element and appends child element, if any.
 * @param tagName The name of the element eg. a or script
 * @param attributes Any additional attributes to add to the element after creating. Eg. href
 * @param children Any child elements you want appended on creating this element, obviously they could be createElement calls as well
 */
export function createElement(tagName, attributes, children) {
    const ele = attributes === (void 0)
        ? document.createElement(tagName)
        : Object.assign(document.createElement(tagName), attributes);
    if (children) {
        for (let i = 0, length = children.length; i < length; i++) {
            const child = children[i];
            ele.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
        }
    }
    return ele;
}

createElement.ts

/**
 * Shorthand function for document.createElement. Accepts and appends attributes to the newly created element and appends child element, if any.
 * @param tagName The name of the element eg. a or script
 * @param attributes Any additional attributes to add to the element after creating. Eg. href
 * @param children Any child elements you want appended on creating this element, obviously they could be createElement calls as well
 */
export function createElement<T extends HTMLElement>(tagName: string, attributes?: Partial<T>, children?: Array<HTMLElement | string>): T {

	const ele = attributes === (void 0)
		? document.createElement(tagName) as T
		: Object.assign(document.createElement(tagName) as T, attributes);

	if (children) {

		for (let i = 0, length = children.length; i < length; i++) {
			const child = children[i];
			ele.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
		}
	}

	return ele;
}

function el(tagName, attributes={}, children=[]) {
	const ele = Object.assign(document.createElement(tagName), attributes);
	children.forEach(child => ele.appendChild(child));
	return ele;
}
// lambda
el = (tag, props={}, ch=[]) => ch.reduce((e,c) => (e.appendChild(c),e),Object.assign(document.createElement(tag),props))
// usage
el('b',{title:'ok'},[el('hr')])