Why you should care about MooTools

June 9th, 2011 Posted by Dave Mahon

Let me start by saying that I love jQuery. Most of the time, it makes it very easy to write sane code. Sometimes, however, it just feels weird.

For example, let’s say we need to insert a link at the beginning of a div. You might write something like:

$('#myDiv').prepend('<a href="http://my.host/path" title="This is a cool link!">Click here</a>');

-or-

$('<a href="http://my.host/path" title="This is a cool link!">Click here</a>').prependTo('#myDiv');

It seems fairly straightforward, but it’s a maintenance nightmare, because you now have raw HTML buried inside of your Javascript. If it’s complicated HTML that is being dynamically constructed, it’s all too easy to introduce hard to find browser parser errors.

MooTools, on the other hand, gives you a powerful alternative with its Element class.

To create a new DOM element you literally call a constructor and pass the tag name and attributes to it. So, for example, that same link would be built with:

var myLink = new Element('a', {
 href: "http://my.host/path",
 title: "This is a cool link!",
 text: "Click here"
});

At the price of a handful of few extra bytes, you get clear, legible code. The equivalent of .prepend() is thus:

$('#myDiv').grab(myLink, 'top');

While this might at first seem less intuitive, you can use the same method call to insert that link before or after the selected element. Sure, you could do that with .before() or .after() in jQuery, but imagine if you needed to make the insertion point variable!

There are also a slew of additional benefits, like ECMAScript 5 array methods, support for multiple inheritance, and event handlers that make it easy to detect if the user is pressing Alt while right clicking.

Give MooTools a try, but before you do, I strongly urge you to read Sean McArthur’s excellent post, A Better Way to use Elements, on the difference between $() and $$(). If you come from a background of using Prototype, it will seem perfectly natural, but jQuery users can be caught by surprise.

Filed under Article, Javascript Frameworks, mootools, Tutorial

8 Comments

Ross Hadden
June 9th, 2011 at 9:55 pm

You can do the same exact thing in jQuery FYI.

var asdf = $(‘<a>’,{
href: ‘#wtf’,
title: ‘omg’,
text: ‘kthx’
});

asdf then becomes kthx

However I like the DOM insertion method .grab() better than the prepend/append/before/after mess in jQuery. “grab” may not be a very intuitive name for it, but after seeing this post I love how it works.
salomvary
June 10th, 2011 at 1:00 am

How about this?

var myLink = $(‘<a / rel=”nofollow”>’, {
href:”http://docs.jquery.com”,
title: “Documentation should be read carefully!”,
text: “jQuery IS awesome!”
});

$(‘#myDiv’)[someCondition ? 'prepend' : 'append'](myLink);
Dan Shearmur
June 10th, 2011 at 4:08 am

You can use a very similar syntax with jQuery:

var myLink = $(‘<a>’, {
href: “http://my.host/path”,
title: “This is a cool link!”,
text: “Click here”
});

$(‘#myDiv’).prepend(myLink);

You can’t apply events though
Wouter
June 12th, 2011 at 6:34 pm

In cases like this, I personally prefer using inject() instead of grab():

myLink.inject(‘myDiv’, ‘top’);
Ben Everard
June 13th, 2011 at 2:38 am

I too believe this can be similarly achieved using jQuery… the original jQuery example isn’t a fair alternative to the MooTools version. For the fun of it I put both through jsperf.com, just to analyse the performance of each.

http://jsperf.com/inserting-elements-jquery-vs-mootools
Matt Hall
June 13th, 2011 at 3:26 am

@Dan I might be wrong, but I’m pretty sure you can apply events:

var myLink = $(‘<a>’, {
href: “http://my.host/path”,
title: “This is a cool link!”,
text: “Click here”,
click: function(e) {
// event stuff here…
}
});
Dave Mahon
June 13th, 2011 at 5:38 am

@Ben – It may not be perfectly fair, but it’s also how most jQuery I’ve seen in the wild is written. Also, thanks for doing the performance analysis!

A lot of that improved performance, I think, can be attributed to how close the MooTools element constructor is to the native document.createElement relative to jQuery’s set manipulation. Each call to new Element() quickly calls MooTool’s document.newElement() which constructs the HTML and then passes it to the native document.createElement().

The ~2% improvement is negligible when you’re constructing one or two elements, but I’d consider it worthy of consideration when raw performance is an issue (say, on mobile devices or complex documents).
Dota 2
June 16th, 2011 at 12:14 am

Please tell me it worked right? I dont desire to sumit it again if i do not have to! Either the blog glitced out or i am an idiot, the second alternative doesnt surprise me lol. thanks for a good blog!