Create Elements on the Fly with MooTools 1.3 and Slick
As we were so excited to announce last week, MooTools 1.3 beta has been released. MooTools 1.3 marks the introduction of Slick, an ultra flexible, ultra powerful selector engine created by Thomas Aylott, Fabio Costa, and Valerio Proietti. As the release blog post cited:
- Slick is an independent project; it may be implemented in any framework that is flexible enough to allow it.
- Slick is much, much faster than the MooTools 1.2 selector engine.
- Supports just about every selector you can think of.
- Slick has a detached parser. You can parse a CSS-style-selector string and get back a property-filled object.
- Supports XML documents.
- Slick is so customizable that you can create your own Pseudo Selectors and Attribute Selectors.
And if that's not enough, MooTools 1.3 has flawlessly incorporated Slick to allow you to create new elements on the fly. Check this out!
MooTools & Slick Shorthand Element Creation
var div = new Element('div');
//creates <div />
The above snippet creates a DIV element. Too simple, lets get a bit trickier.
var div = new Element('div.myClass');
//creates <div class="myClass" />
The above snippet creates a DIV element with a myClass CSS class. Still too simple.
var div = new Element('div#myId.myClass.myOtherClass[title=My Title][text=Element Inner Text]');
//creates <div class="myClass myOtherClass" title="My Title">Element Inner Text</div>
The above snippet creates a DIV element with an ID, CSS classes, a title attribute, and the text "My Text." I mean that's just stupid cool slick, right?
Slick is just one great enhancement within MooTools 1.3. Even if you don't use MooTools, you can still use Slick within your framework or project. Be sure to download Slick for your own work. Oh...an that small MooTools 1.3 thing too....
waiting final release
I can see how slick can make some really complex DOM manipulation a lot less painful. I’m looking forward to seeing more of slick.
Very impressive with the new features and integration to Slick. I think element creation with mootools is pretty easy as is already, but the selector stuff is definitely going to make a difference.
Very cool. I’ve been waiting for an element creation like this. It reminds me a lot of how Coda does element creation. Love it! ^_^
very nice ! man u are the best at mootools
Although quite cool, i don’t see much use to anything above
new Element('div#id.class');first because if i would have wanted to create elements via strings i could just as well do so (via set html).
second because it must be tons slower to parse these strings into elements.
third because it makes the code less readable and not as easy to maintain (at least for dynamic contents, this would make the need to concatenate strings with variables, which will be very uncomfortable)
jQuery folks would love it, not me.
After months (years?) from my first comment I have to admit that slick is super duper cool. Kudos to you David :)
@Alex: Of course, you don’t *need* to create elements this way.
@Arieh: It’s not about _needing_ to do it this way. We don’t _need_ to use mootools or jquery, You could very well do without a framework all together, so why use mootools/jquery at all?
It’s a convenience method, and honestly, for designers that know CSS, but not much of JavaScript, this could be quite the time-saver.
@Arieh: The benchmarks are all on GitHub if you’d like to take a peak.
Basically, the Slick parser is a million times faster than anyone would ever want.
Hi david,
Mootools Rocks,
Waiting for the final release of the mootools 1.3
I have heard about slick today, checking now the usefulness of it.
You have added it in newer version of mootools then it should be good at all.
Thanks
Avinash
Can’t wait to see the power of Slick selectors…
When is 1.3 going to get released???
Help me if I’m missing something, but where does the #myId get used? I don’t see it as part of the sample Slick output that you gave.
var div = new Element('div#myId.myClass.myOtherClass[title=My Title][text=Element Inner Text]'); 2 //creates Element Inner Text // where is myId ??