@gavinning/emmet.js v1.0.1
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 :)