[![NPM version][npm-image]][npm-url]
[![Build Status][build-image]][build-url]
[![Dependency Status][deps-image]][deps-url]

el

creates HTML from jade like expressions

Particularly useful if you are a fan of [insertAdjacentHTML][1] but if setting innerHTML is your
thing el works just as well.

Installation

Install with [npm]:

$ npm install el-component

API

$3

- tag - can be the name of HTML tag (span, img etc.) or a jade-like expression
- content - is an optional content of the tag
- attributes - object with a map of attributes added to the generated HTML, class attribute is
merged with what was parsed from tag

Some examples:

el('span', 'some text inside'); // some text inside
el('span.title', 'Title'); // Title
el('span.title.car', 'Title'); // Title
el('span#title.car', 'Title'); // Title

you can skip the tag name if you want div:

el('#title', 'Title'); //

el(); //

el knows about void elements:

el('img', { src: 'http://example.com/img.png' }); //
el('iframe', { src: 'http://example.com' }); //

$3

A version of el that can be used to render XML (SVG etc.). It has no notion of voids, which means it closes tags without content with />.

Some examples:

el.xml('path', { d: 'M0 0H5V7Z' }); //

License

MIT © Damian Krzeminski

[npm-image]: https://img.shields.io/npm/v/el-component
[npm-url]: https://npmjs.org/package/el-component

[build-url]: https://github.com/pirxpilot/el/actions/workflows/check.yaml
[build-image]: https://img.shields.io/github/actions/workflow/status/pirxpilot/el/check.yaml?branch=main

[deps-image]: https://img.shields.io/librariesio/release/npm/el-component
[deps-url]: https://libraries.io/npm/el-component

[1]: https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML
[npm]: https://www.npmjs.org/