A function for creating DOM elements with attributes and nested children.

el.ts

export function el<T extends keyof HTMLElementTagNameMap>(
	tag: T,
	attrs: Partial<HTMLElementTagNameMap[T] & { class: string | string[] } & { [K: `data-${string}`]: any; }> = {},
	...children: (HTMLElement | string)[]
): HTMLElementTagNameMap[T] {
	const element = document.createElement(tag);
	for (const [key, value] of Object.entries(attrs))
		element.setAttribute(key, getAttrValue(key, value));
	for (const child of children)
		element.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
	return element;

	function getAttrValue(key: string, value: any): string {
		if (key === 'class')
			return Array.isArray(value) ? value.join(' ') : value.toString();
		else if (key.startsWith('on') && typeof value === 'function')
			return `(${value.toString()})()`;
		else
			return value.toString();
	}
}