el-component

el

creates HTML from jade like expressions

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

Installation

Install with npm:

$ npm install el-component

API

el(tag, content, attributes)

• 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'); // <span>some text inside</span>
el('span.title', 'Title');      // <span class="title">Title</span>
el('span.title.car', 'Title');  // <span class="title car">Title</span>
el('span#title.car', 'Title');  // <span class="car" id="title">Title</span>

you can skip the tag name if you want div:

el('#title', 'Title');   // <div id="title">Title</div>
el();                    // <div></div>

el knows about void elements:

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

el.xml(tag, content, attributes)

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' }); // <path d="M0 0H5V7Z"/>

License

MIT