Utility script for creating HTMLElements.

import tag from 'lean-tag';

const divEl = tag('div.custom-class', 'text content');

document.body.appendChild(divEl);

const ul = tag('ul', ['1', '2', '3'].map((text) => tag('li', text)));

//<ul><li>1</li><li>2</li><li>3</li></ul>
console.log(ul.outerHTML);

For more examples, see the docs page.

Function accepts any number of parameters, that usually are strings, nodes, arrays or objects. All other parameters are converted to string.

If first parameter is a string, it is treated as a description of tagName and classes. No ids are supported in that string.

That first param is split by a dot, then first element of resulting array is treated as a tagName. If it's an empty string, div is created.

const div = tag('.class-name');
const section = tag('section');
const h1 = tag('h1.class-name');
const div = tag();

If parameter is an array, it can contain nodes, text, or anything else that will be converted to text node.

If parameter is an object, its keys will be attribute/property/event names assigned to the element, and corresponding values will be the values or event handlers.

If parameter is a Node, it will be appended as a child.

Anything else than previous options will be converted to a TextNode.