Socket
Socket
Sign inDemoInstall

el-component

Package Overview
Dependencies
0
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

el-component


Version published
Maintainers
1
Created

Readme

Source

Build Status Dependency Status NPM version

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

Keywords

FAQs

Last updated on 23 Feb 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc