Jaki jest najbardziej efektywny sposób tworzenia elementów HTML za pomocą jQuery?

Osobiście proponuję (dla czytelności):

$('<div>');

Niektóre numery na razie sugestie (safari 3.2.1 / mac os X):

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms              

Pytanie:

Jaki jest najbardziej efektywny sposób tworzenia elementów HTML za pomocą jQuery?

Odpowiedź:

Ponieważ chodzi o jQuery to myślę, że lepiej jest użyć tego (czystego) podejścia (używasz)

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');

DEMO.

W ten sposób możesz nawet użyć obsługi zdarzeń dla określonego elementu, takiego jak

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'style':'cursor:pointer;font-weight:bold;',
    'html':'<span>For HTML</span>',
    'click':function(){ alert(this.id) },
    'mouseenter':function(){ $(this).css('color', 'red'); },
    'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');

DEMO.

Ale gdy masz do czynienia z wieloma dynamicznymi elementami, powinieneś unikać dodawania event handlers w konkretnym elemencie, zamiast tego powinieneś użyć delegowanej obsługi zdarzenia, takiej jak

$(document).on('click', '.myClass', function(){
    alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
    $('<div/>', {
        'class':'myClass',
        'html':'<span>Element'+i+'</span>'
    }).appendTo('body');
}

DEMO.

Tak więc, jeśli utworzysz i dopiszesz setki elementów z tą samą klasą, np. (myClass), wtedy mniej pamięci zostanie zużyte do obsługi zdarzeń, ponieważ tylko jedna obsługa będzie tam wykonywać zadanie dla wszystkich dynamicznie wstawianych elementów.

Update: ponieważ możemy użyć następującego podejścia do tworzenia dynamicznego elementu

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");

Ale size atrybut nie może być ustawiony przy użyciu tego podejścia przy użyciu jQuery-1.8.0 lub później i tutaj jest stary raport o błędzie, spójrz na ten przykład używając jQuery-1.7.2 który pokazuje, że size atrybut jest ustawiony na 30 używając powyższego przykładu, ale używając tego samego podejścia nie możemy ustawić size atrybutu używając jQuery-1.8.3, tutaj jest niedziałające skrzypce. Tak więc, aby ustawić atrybut size, możemy użyć następującego podejścia

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");

Lub ten

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

Możemy przekazać attr/prop jako obiekt potomny, ale to działa w jQuery-1.8.0 and later wersje sprawdzić ten przykład ale to nie będzie działać w jQuery-1.7.2 or earlier (nie testowane we wszystkich wcześniejszych wersjach).

BTW, zaczerpnięte z jQuery Zgłoś błąd

Istnieje kilka rozwiązań. Pierwszym jest nie używać go w ogóle, ponieważ nie oszczędza miejsca, a to poprawia przejrzystość kod:

Radzili zastosować następujące podejście (działa również we wcześniejszych, wypróbowanych w 1.6.4)

$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");

Więc, lepiej jest zastosować takie podejście, IMO. Ta aktualizacja jest po przeczytaniu / znalezieniu ta odpowiedź i w tej odpowiedzi pokazuje, że jeśli użyjesz 'Size'(capital S) zamiast 'size', to po prostu będzie działać dobrze , nawet w version-2.0.2 {32]}

$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');

Przeczytaj również o prop , ponieważ istnieje różnica, Attributes vs. Properties, różni się w zależności od wersji.

Właściwie, jeśli robisz $('<div>'), jQuery będzie również używać document.createElement().

(Wystarczy spojrzeć na linia 117 ).

Istnieje narzut wywołania funkcji, ale jeśli wydajność nie jest krytyczna (tworzysz setki [tysięcy] elementów), nie ma powodu, aby powrócić do zwykłego DOM.

Samo tworzenie elementów dla nowej strony jest prawdopodobnie przypadkiem, w którym najlepiej trzymać się jQuery Sposób działania.

Jeśli masz dużo treści HTML (więcej niż pojedynczy div), możesz rozważyć zbudowanie HTML na stronie w ukrytym kontenerze, a następnie zaktualizowanie go i uczynienie go widocznym w razie potrzeby. W ten sposób duża część znaczników może być wstępnie parsowana przez przeglądarkę i uniknąć zagnieżdżania się przez JavaScript podczas wywoływania. Mam nadzieję, że to pomoże!

To nie jest poprawna odpowiedź na to pytanie, ale nadal chciałbym się tym podzielić...

Używanie tylko document.createElement('div') i pomijanie JQuery znacznie poprawi wydajność, gdy chcesz tworzyć wiele elementów w locie i dodawać je do DOM.

Myślę, że używasz najlepszej metody, chociaż możesz ją zoptymalizować do:

 $("<div/>");

Nie potrzebujesz surowej wydajności z operacji, którą wykonujesz niezwykle rzadko z punktu widzenia procesora.

Musisz zrozumieć, że znaczenie wydajności tworzenia elementów jest nieistotne w kontekście korzystania z jQuery w pierwszej kolejności.

Pamiętaj, że nie ma prawdziwego celu tworzenia elementu, chyba że masz zamiar go użyć.

Możesz pokusić się o przetestowanie wydajności czegoś w rodzaju $(document.createElement('div')) vs. $('<div>') i uzyskanie wspaniałych zysków z używania $(document.createElement('div')), ale to tylko element, którego jeszcze nie ma w DOM.

Zobaczmy, jeśli przetestujesz następujące przeciwko sobie:

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

Zauważysz, że wyniki będą się różnić. Czasami jeden sposób działa lepiej niż drugi. Dzieje się tak tylko dlatego, że liczba zadań w tle na komputerze zmienia się w czasie.

Sprawdź się tutaj

Więc, w końcu, chcesz wybrać najmniejszy i najbardziej czytelny sposób tworzenie elementu. W ten sposób przynajmniej Twoje pliki skryptów będą jak najmniejsze. Prawdopodobnie bardziej znaczącym czynnikiem na punkcie wydajności niż sposób tworzenia elementu przed użyciem go w DOM.

Ktoś już zrobił benchmark: jQuery document.createElement equivalent?

$(document.createElement('div')) jest wielkim zwycięzcą.

Jeden punkt jest taki, że może być łatwiej:

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

Następnie zrobić to wszystko z wywołaniami jquery.

Używam jquery.min v2. 0. 3 . Dla mnie lepiej używać następujących:

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

Jak Następuje:

var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);

Czas Przetwarzania pierwszego kodu jest znacznie niższy niż drugiego kodu.