Skip to content
🔮 Generate HTML from CSS selectors
JavaScript CSS HTML
Latest commit 595293a Jun 16, 2015 @padolsey Merge pull request #7 from IonicaBizauKitchen/code-highlight
Code highlight in

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.

Something went wrong with that request. Please try again.