Skip to content
:crystal_ball: Generate HTML from CSS selectors
JavaScript CSS HTML
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
test
README.md
demo.html
minify
package.json
satisfy.js
satisfy.min.js
satisfy.min.js.gz

README.md

Satisfy that selector!

Satisfy is a stand-alone (no dependencies) JavaScript function for generating HTML from CSS selectors. It's incredibly simple.

This:

satisfy('div a');

Returns the following DOM structure:

<div>
    <a></a>
</div>

You can use attribute selectors and a numerical psuedo-class to manipulate the produced structure further:

satisfy('ul li:5 span[innerHTML="item"]');

And that would produce this:

<ul>
    <li><span>item</span></li>
    <li><span>item</span></li>
    <li><span>item</span></li>
    <li><span>item</span></li>
    <li><span>item</span></li>
</ul>

And sibling combinators (note: ~ and + do the same thing in this context):

staisfy('div span + a');

Output:

<div>
    <span></span>
    <a></a>
</div>

Note: satisfy() returns a NodeList containing the elements you want. It's not a real array.

Other minor features

You can set a boolean property with a no-value attribute expression (Thanks to Kangax):

satisfy('input[type=checkbox][checked]');
satisfy('audio[autoplay]');

You can also set an element's innerHTML like so:

satisfy('div a[innerHTML=blah]');
// or:
satisfy('div a[html=blah]);

It's also possible to set multiple classes:

satisfy('a.b.c.d'); // => <a class="b c d"></a>

jQuery

If you're using jQuery then you can use Satisfy like so:

jQuery.satisfy('div a:5').prependTo('body');

jQuery.satisfy returns a jQuery instance containing all of the elements produced from whatever selector you pass to it. This makes it possible to use any of jQuery's methods... So, instead of:

jQuery('<div><a/></div>').appendTo(foo);

... you can do:

jQuery.satisfy('div a').appendTo(foo);

Improvements in 0.3

I re-wrote most of the code in 0.3. The mechanism now used for creating elements is mostly fragment-based and the selector is processed in reverse.

Something went wrong with that request. Please try again.