Есть ли jQuery-эквивалент конструктора Element () MooTools?

Question

Я собираюсь запустить механизм отчетов javascript для своего веб-сайта и приступил к созданию прототипов с использованием MooTools. Мне очень нравится, что я могу делать такие вещи:

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

Из того, что я видел, методы типа "accept" в jQuery принимают только строки html или элементы DOM. Есть ли какой-нибудь jQuery-эквивалент MooTools ' Element ? <Ч /> РЕДАКТИРОВАТЬ: Большая вещь, которую я ищу здесь, это программная привязка моего события клика к ссылке.

Answer 1

синтаксически, может быть лучше использовать jQuery для этого, но, вероятно, более эффективно использовать

  document.createElement('li')

И устраните необходимость в минимальном тесте сравнения строк и незначительном разборе токена.

flydom также может щекотать ваш интерес, если вы настаиваете на создании большого количества узлов dom. (Должно быть быстрее в теории, но не проверял)

---

Примечание: внутренне jQuery ("") выглядит так, как будто он делает это (упрощенно):

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

Таким образом, можно предположить, что «document.createElement» является, таким образом, «требованием», и если вы знаете , что вы хотите получить (то есть: не обрабатываете некоторые сторонние данные с помощью $( datahere )), то document.createElement Имхо было бы так же логично и с увеличением скорости, чтобы избежать многочисленных регулярных выражений и медленных манипуляций со строками.

Для сравнения: jQuery(document.createElement('div')) похоже, что это эффективно делает это (упрощенно):

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

Answer 2

Вот то же самое в jQuery. По сути, для создания нового элемента вы просто добавляете нужный HTML-код.

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