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

StackOverflow https://stackoverflow.com/questions/176545

  •  05-07-2019
  •  | 
  •  

Question

I am going to be starting a javascript reporting engine for my website, and have started some prototyping using MooTools. I really like being able to do things like this:

function showLeagues(leagues) {
    var leagueList = $("leagues");
    leagueList.empty();
    for(var i = 0; i<leagues.length; ++i) {
        var listItem = getLeagueListElement(leagues[i]);
        leagueList.adopt(listItem);
    }
}

function getLeagueListElement(league) {
    var listItem = new Element('li');
    var newElement = new Element('a', {
        'html': league.name,
        'href': '?league='+league.key,
        'events': {
                'click': function() { showLeague(league); return false; }
        }
    });
    listItem.adopt(newElement);
    return listItem;
}

From what I've seen, jQuery's "adopt" type methods only take html strings or DOM Elements. Is there any jQuery equivalent to MooTools' Element?

EDIT: The big thing I'm looking for here is the programmatic attachment of my click event to the link.

Was it helpful?

Solution

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; 
   }
}

OTHER TIPS

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;
            })
        )
    ;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top