https://github.com/pirxpilot/el

creates HTML from jade like expressions
https://github.com/pirxpilot/el

Last synced: over 1 year ago
JSON representation

creates HTML from jade like expressions

• Host: GitHub
• URL: https://github.com/pirxpilot/el
• Owner: pirxpilot
• Created: 2013-12-15T15:07:45.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2017-02-23T07:06:37.000Z (over 9 years ago)
• Last Synced: 2025-03-02T03:23:17.005Z (over 1 year ago)
• Language: JavaScript
• Size: 9.77 KB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

          
[![Build Status](https://img.shields.io/travis/pirxpilot/el.svg)](http://travis-ci.org/pirxpilot/el)

[![Dependency Status](https://img.shields.io/gemnasium/pirxpilot/el.svg)](https://gemnasium.com/pirxpilot/el)

[![NPM version](https://img.shields.io/npm/v/el-component.svg)](http://badge.fury.io/js/el-component)

# 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

### 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'); // 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');   // 
Title

    el();                    // 


el knows about void elements:

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

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

### 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' }); // 

## License

  MIT

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

[npm]: https://www.npmjs.org/