MooTools-Like Element Creation in jQuery

Discussion

1. psalmi

   I don’t know if this is a step in a right direction. To me, mootools element creation has always been too heavyweight and I’ve resorted into using String.substitute and set(‘html’) -combo.

   Manual element creation has also been a major performance penalty with IE and tables, if I remember correctly instead of creating everything from a string.

   Having said that, I don’t like jQuery syntax anymore than you do, I’ve had enough of that when porting FancyBox into mootools syntax.
2. Cedric Dugas

   I can’t say that I agree with this idea, this is the fastest jquery way to parse something into the DOM. You just add a not needed JS layer.

   The jQuery syntax is something you really like or you just hate I think, if you don’t like it, you better use directly mootools :P
3. David Walsh

   “The jQuery syntax is something you really like or you just hate I think, if you don’t like it, you better use directly mootools”

   I disagree. If I inherit an old website I cannot simply switch their entire website to MooTools.
4. Rick

   ewwww. Not sure if that’s a good thing.
5. David Walsh

   @Rick: I am. :)
6. thomasd

   @Cedric Dugas: Creating an Element isn’t the same thing as parsing a string to DOM-Elements. So mootools doesn’t add an extra JS Layer, it uses a completely different (more robust, semantic and object-oriented) way via document.createElement. While jQuery passes the string over to .innerHTML.
   I think you can’t compare this two methods directly.

   @psalmi: You’re right it’s a little clunky. I think you will love mootools 2.0. It will allow you to create elements by passing a selector. Something like: var div = new Element('div.my-class');

   This said I think you can guess which way I prefer. :) (moo rocks)
7. Cedric Dugas

   Well this is a special case, most of your time is probably spent on new sites.

   Anyway as far as I am concern, I rarely work on old websites with technologies my company do not work with.
8. Rick

   @Walsh hahaha. yes. you are.
9. Marc Fowler

   Definitely a good idea – jQuery’s weird syntax really does put me off.
10. Jeffrey Schrab

    There’s a time and a place for both techniques. I like the Mootools way when I want to create an element AND assign event handlers to it all in one go.

    More complicated element structures are a bit of a pain to do with the new Element() method. The innerHTML method works out better for me in that case, even if I have to assign event handlers after the fact.
11. Ethan

    I still prefer jquery syntax:

    $(function() {
    $("")
      .id('item')
      .addClass('custom-class')
      .html('This a new LI element').appendTo('body');
    })
    

    vs

    $(document).ready(function() {
    	var element = $.create('li',{
    		id: 'item',
    		'class': 'custom-class'
    	},['This is a new LI element']);
    	$(document.body).append(element);
    });
    
12. Ethan

    @Ethan: $(“”) should be $(“<li>”)
13. Jeremy Martin

    This is an interesting plugin. Normally I would recommend learning the “normal” syntax of whatever tool you’re using, but syntactic sugar like this can definitely help smooth out the learning curve for new users.

    If the goal is to avoid the html literal, as opposed to explicitly imitating Mootools, you could also do this the “jQuery way” like this…

    var $el =$('el').attr({
        id : 'item',
        class : 'custom-class'
    }).text('This is a new LI element');
    
    $(document.body).append($el);
    

    It’s worth noting, though, that in some cases using a literal string is actually more performant…
14. Jeremy Martin

    Oops – in my example, “class : ‘custom=class'” should be “className : ‘custom-class'”. Class is a special case: http://docs.jquery.com/Attributes/attr#properties.
15. Jeremy Martin

    Edit #2: $(‘el’) should also be $(‘li’). Must be monday….
16. Steve Calvert

    Ya I’m not sure I’m agreeing with this either. I used to love mootools, but now since I’ve been using jQuery I find the syntax quite easy to work with. I do agree that having strings in your code is less than ideal, but it almost fits in with jQuery’s expressive nature. I’m gonna let this one slide…
17. James

    @thomasd, hold on a sec! You’re claiming that the “innerHTML” technique is flawed (or not as “robust” as MooTools’ technique) and that it adds another “JS layer” (by which I assume you mean “abstraction”) yet you’re promoting a new technique with a much higher level of abstraction. Using a CSS selector to create HTML elements in production code is a very bad idea. The performance hit isn’t worth it. jQuery is built for speed; delegating element creation to the browser’s parsing mechanism is the fastest way to create elements (there’s no contest).

    @marc, how is it weird? What could be a more natural way of creating HTML elements than writing HTML syntax?

    It might also be worth discussing the suitability of creating elements with JavaScript at all. In most situations, a primative templating system is better than either jQuery’s or MooTools’ techniques – it would allow a more maintainable means to dynamically add HTML.

    “The code isn’t beautiful”

    I agree.
18. jQueryGlobe

    Looks like reinventing the wheel. I don`t see why this method is better than writing:

    $('').attr('id', 'myid').css('opacity', '0.5').appendTo("#wrap");
    
19. jQueryGlobe

    seems like some tags are stripped …
20. Paul Irish

    I, too, prefer writing HTML as a string instead of this object representation, but I can see the allure in it (despite its performance overhead).

    Here’s a little snippet I’ve used a lot when desiring this object-y style:

     /* Return a DOM element with tag name `elem` and attributes {attrs}. */
    function DOM(elem, attrs) {
      var elem = document.createElement(elem);
      for (var attr in attrs) {
        elem[attr] = attrs[attr];
      }
      return elem;
    }
    

    It provides nearly exactly the same API as the above code (though probably not as full-featured)… As an example:

    	var element = DOM('li',{
    		id: 'item',
    		'className': 'custom-class',
                    'innerHTML': 'This is a new LI element'
    	});
    

    Also, (moreso from the comments on Basil’s post..) I wanted to point out that throwing jQuery a big string of HTML is faster than using all the methods…

    So:

    $('#wrapper").append('hello world');
    

    is faster than

    jQuery(" " ).attr( "id", "wrapper-header").addClass( "header" ).html( "hello world").appendTo( jQuery( "#wrapper" ) );
    

    Cheers
21. thomasd

    @james: you’re totally right, nothing is as fast as innerHTML, that’s what browsers are best in, parsing HTML-text to HTML in the DOM. What I tried to say is, that there isn’t a jQuery or a mootools way of creating elements. It’s parsing (innerHTML) on the one side and object-oriented creating of elements (document.createElement) on the other side and you can’t compare them directly. Two different ways of doing the same.

    I didn’t say innerHTML adds another JS-layer. What I said was mootools doesn’t add another JS layer it uses the object-oriented way. Not better or bader just different.

    For me using CSS selectors to create elements is something between this two methods. Expressive strings to make it a little easier to read and write, but still be objected-oriented. Still not better or bader but definitly slower than innerHTML, I agree with you. But JS-engines become faster and faster and speed isn’t always the most importing thing.

    Still…mootools rocks :)
    Oh and sorry for my bad English, it isn’t my native language.
22. Aeron

    Mootools doesn’t do overloading: getStyle(rule), setStyle(rule, val), setStyles(obj), etc.. With jQuery everything is overloaded – a single css() does all of the above depending on whether 1 or 2 params are passed and whether they are objects or strings.

    So it totally makes sense to do $(‘li’) to find all the LI’s in a page, and $(”) to create a new LI.

    I came from a Mootools background to a huge jQuery project – first thing I did was port over a bunch of Mootools goodies: bind and pass (which look to be coming in the next version of jQuery) and Array, String and Number helpers… but the goal is understanding the tools you are given. It is the difference between someone who is a year in another country and everytime they speak think “how would I say this in English” and then translate – vs – someone who is 10 years in another country and just speaks the language fluently. $.create() is not increasing your toolbox, it’s rewriting a piece of a foreign language in English.
23. Steve Calvert

    @Aeron – well said.
24. Jedidiah

    Would be nice if you could stick to the css syntax instead

    .create('li#item.custom-class', 'content of the element here');
25. Ryan Rampersad

    I find the mootools element creation clunky so I use the string substitution that was mentioned in the comments too, it’s quick and easy, plus I get a bunch of elements quick.

    That said, I can see how it would be nice to map a comfortable syntax to an uncomfortable one in situations where there is no other remedy.
26. mits

    hello,

    this is a good idea, but my function is easier than your:

    (function($){
        $.fn.create = function(element, attributes){
            return $(document.createElement(element)).attr(attributes).prependTo(this);
        };
    })(jQuery);
    

    usage:

    $('body').create('div', {'id':'sampleId', 'class':'normal'}).text('sample');
    
27. David Walsh

    @mits: AWESOME! I love it!