Existe-t-il un équivalent jQuery du constructeur de MooTools 'Element ()?

Question

Je vais lancer un moteur de génération de rapports javascript pour mon site Web et j'ai commencé à faire du prototypage avec MooTools. J'aime vraiment pouvoir faire des choses comme celle-ci:

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

D'après ce que j'ai vu, jQuery est & "adopter &"; les méthodes de type ne prennent que des chaînes html ou des éléments DOM. Existe-t-il un équivalent jQuery de Element de MooTools?

---

EDIT: La grande chose que je recherche ici est la pièce jointe programmée de mon événement click au lien.

Answer 1

syntaxiquement, il serait peut-être plus agréable d’utiliser jQuery pour le faire, mais c’est probablement plus efficace d’utiliser

  document.createElement('li')

Et éliminez au minimum le besoin d'un test de comparaison de chaînes et d'une analyse de jeton mineure.

flydom peut également éveiller votre intérêt si vous insistez pour générer beaucoup de nœuds dom. (Il devrait être plus rapide en théorie, mais ne l’a pas testé)

Remarque: en interne, jQuery (& "; < html > < / html > &";) a l'air de le faire efficacement ( trop simplifié):

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

Donc, on présumerait & "; document.createElement &"; est donc une " condition " ;, et si vous savez ce que vous voulez, (c.-à-d.: ne pas analyser certaines données tierces avec $( datahere )), alors jQuery(document.createElement('div')) soyez tout aussi logique et accélérez pour éviter les nombreuses expressions rationnelles et les manipulations lentes des chaînes.

Par comparaison: <=> (cela simplifie énormément):

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

Answer 2

Voici la même chose dans jQuery. Fondamentalement, pour créer un nouvel élément, il vous suffit de saisir le code HTML souhaité.

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