CSS Selector to HTML generator.


Satisfy that selector!

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


satisfy('div a');

Returns the following DOM structure:


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:


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

staisfy('div span + a');



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):


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>


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:


... 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.