ansaurus

Question

Is there a jQuery equivalent of MooTools' Element() constructor?

Answer 1

+4 A:

Here's that same thing in jQuery. Basically to create a new element, you just put in the HTML you want.

function showLeagues(leagues) {
    var $leagueList = $("#leagues");
    $leagueList.empty();
    $.each(leagues, function (index, league) {
        $leagueList.append(getLeagueListElement(league));
    });
}

function getLeagueListElement(league) {
    return $('<li></li>')
        .append($('<a></a>')
            .html(league.name)
            .attr('href', '?league=' + league.key)
            .click(function() {
                showLeague(league);
                return false;
            })
        )
    ;
}

nickf 2008-10-06 23:03:44

Instead of $('<li></li>') you can just use $('<li/>') btw

J-P 2008-10-07 10:46:29

good catch Jimmy.

Chris Marasti-Georg 2008-10-07 12:26:21

do note, the "<li/>" code is sub-optimal, and looking at the code shows that jquery does regexp to expand it back to "<li></li>" ;)

Kent Fredric 2008-10-08 08:59:22

Answer 2

+3 A:

syntactically, it may be nicer to use jQuery to do it, but its probably more efficient to use

  document.createElement('li')

And eliminate the need for at the bare minimum a string comparison test and a minor token parse.

flydom may also tickle your interest if you insist on generating a lot of dom nodes. ( It should be faster in theory, but have not tested it )

Note: Internally, jQuery("<html></html>") looks like it effectively does this(oversimplified):

jQuery(matcher) --> function(matcher)
{
   return jQuery.fn.init(matcher) --> function(matcher)
   {
      return  this.setArray(
        jQuery.makeArray(
           jQuery.clean(matcher) --> function(matcher)
           { 
               div = document.createElement('div');
               div.innerHTML = matcher;
               return div.childNodes;
           }
        )
      );
   }
}

So one would presume "document.createElement" is thus a "requirement", and if you know what you want out ( ie: not parising some 3rd party data with $( datahere ) ) then document.createElement would imho be just as logical and with a speed boost to avoid the numerous regexps and slow string manipulations.

By comparison: jQuery(document.createElement('div')) looks like it effectively does this(oversimplified):

jQuery(matcher) --> function(matcher)
{
   return jQuery.fn.init(matcher) --> function(matcher)
   {
       this[0] = matcher; 
       this.length = 1; 
       return this; 
   }
}

Kent Fredric 2008-10-06 23:59:39

Is there any browser that is modern enough to be supported by the main js libraries that doesn't include those DOM methods? My desire to use framework-specific code was twofold - one, to keep syntax consistent in my code, and two, to make sure I didn't have to care about browser differences.

Chris Marasti-Georg 2008-10-07 11:28:22

Answer extended. From what i can tell, if the browser doesn't support document.createElement, then not even jQuery will work on it.

Kent Fredric 2008-10-08 09:00:22

To be sure of your intent, you are saying that instead of: $('<a></a>').attr('href', '?league=' + league.key)..., you would recommend: $(document.createElement("a")).attr('href', '?league=' + league.key)... ?

Chris Marasti-Georg 2008-10-09 15:35:14

yes. that is what *I* would do :)

Kent Fredric 2008-10-09 17:20:10

ansaurus

tags:

views:

answers:

Is there a jQuery equivalent of MooTools' Element() constructor?

related questions