sheshouzuo / emmet.js

Use emmet syntax with javascript

Emmet.js

Use emmet syntax with Javascript.

Version

Beta 1

Licence

Emmet.js is under GNU General Public License v3.0.

Requirements

Emmet.js does not require anything.

Installation

Just include the script in your HTML page:

<script type="text/javascript" src="path/emmet.js"></script>

Or, using the minified version:

<script type="text/javascript" src="path/emmet.min.js"></script>

Using

Emmet.js is based on the emmet syntax so just use it. Be careful, Emmet.js does not support grouping as emmet does with parenthesises. In these examples, Node objects are represented by their HTML syntax, but they are Node objects!

Create a div:

var div=emmet('div');
// Returns: <div>

Create one hundred div-s:

var divs=emmet('div*100');
// Returns: [<div></div>,<div></div>,...,<div></div>]

Create one hundred div-s incrementing the id (works with any attribute):

var divs=emmet('div*100#d$');
// Returns: [<div id="d1"></div>,<div id="d2"></div>,...,<div id="d101"></div>]

Create one hundred div-s decrementing the id:

var divs=emmet('div*100#d$@-');
// Returns: [<div id="d101"></div>,<div id="d100"></div>,...,<div id="d1"></div>]

Create a span with text "Hello" inside a div:

var divAndSpan=emmet('div>span{Hello}');
// Returns: <div><span>Hello</span></div>

You can use Emmet.js from any Node in the DOM so it directly appends the element(s) inside the Node (and return the element(s) as previously):

document.body.emmet('div');
// Appends a div in the body and returns: <div>

Furthermore, you can also use Emmet.js from any NodeList to directly append the element(s) inside each Node in the NodeList:

document.getElementsByTagName('div').emmet('span');
// Append a span inside each div of the document

To have a more complete documentation, just go to docs.emmet.io.

Development

Emmet.js is open to any kind of contribution :)