Каков наиболее эффективный способ создания HTML-элементов с помощью jQuery?

лично я бы предложил (для читабельности):

$('<div>');

некоторые цифры по предложениям до сих пор (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              

вопрос:

каков наиболее эффективный способ создания HTML-элементов с помощью jQuery?

ответ:

так как речь идет о jQuery тогда, я думаю, лучше использовать этот (чистый) подход (вы используете)

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

демо.

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

$('<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');

демо.

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

$(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');
}

демо.

Итак, если вы создаете и добавляете сотни элементов с одним и тем же классом, т. е. (myClass) тогда меньше памяти будет потребляться для обработки событий, потому что только один обработчик будет там, чтобы сделать работу для всех динамически вставленных элементы.

обновление : так как мы можем использовать следующий подход для создания динамического элемента

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

но size атрибут не может быть установлен с помощью этого подхода с помощью jQuery-1.8.0 или позже и вот старый сообщить об ошибке посмотри используя jQuery-1.7.2 откуда видно, что size атрибут имеет значение 30 используя приведенный выше пример, но используя тот же подход, мы не можем установить size атрибут с помощью jQuery-1.8.3 здесь а нерабочий скрипка. Итак, чтобы установить , мы можем использовать следующий подход

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

или

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

мы можем передать attr/prop как дочерний объект, но он работает в jQuery-1.8.0 and later варианты проверки но это не работает на jQuery-1.7.2 or earlier (не проверял во всех предыдущих версиях).

кстати, взято из jQuery сообщить об ошибке

есть несколько решений. Этот первый-не использовать его вообще, так как это не экономит вам места, и это улучшает четкость код:

они посоветовали использовать следующий подход ( работает в более ранних также, испытанный в 1.6.4)

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

так что лучше использовать этот подход, ИМО. Это обновление сделано после того, как я прочитал/нашел ответ и в этом ответе показано, что если вы используете 'Size'(capital S) вместо 'size' тогда это будет просто работа штраф в размере, даже version-2.0.2

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

Также читайте о prop, потому что есть разница, Attributes vs. Properties, оно варьирует в зависимости от версии.

на самом деле, если вы делаете $('<div>') jQuery и будут использовать document.createElement().

(просто взгляните на строка 117).

есть некоторые функции вызова накладных расходов, но если производительность не является критическим (вы создаете сотни [тысячи] элементов), нет особых причин, чтобы вернуться к простой DOM.

просто создание элементов для новой веб-страницы, вероятно, случай, в котором вы будете лучше придерживаться jQuery способ делать вещи.

Если у вас есть много содержимого HTML (больше, чем просто один div), вы можете рассмотреть возможность создания HTML на странице в скрытом контейнере, а затем обновить его и сделать его видимым, когда это необходимо. Таким образом, большая часть вашей разметки может быть предварительно проанализирована браузером и избежать увязания с JavaScript при вызове. Надеюсь, это поможет!

Это не правильный ответ на вопрос, но все же я хотел бы поделиться этой...

используя document.createElement('div') и пропуск JQuery значительно улучшит производительность, когда вы хотите сделать много элементов на лету и добавить к DOM.

Я думаю, что вы используете лучший способ, хотя вы могли бы оптимизировать это:

 $("<div/>");

вам не нужна максимальная производительность от операции вы будете выполнять крайне редко с точки зрения процессора.

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

имейте в виду, что нет никакой реальной цели создания элемента, если вы на самом деле не собираетесь его использовать.

у вас может возникнуть соблазн проверить производительность что-то вроде $(document.createElement('div')) и $('<div>') и получить большой прирост производительности от использования $(document.createElement('div')) но это просто элемент, который еще не находится в DOM.

, в конце концов, вы все равно захотите использовать элемент, поэтому реальный тест должен включать f.ex. .appendTo ();

давайте посмотрим, если вы проверите следующее друг против друга:

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

Вы заметите, что результаты будут отличаться. Иногда один способ лучше работает, чем другой. И это только потому, что количество фоновых задач на вашем компьютере меняется с течением времени.

кто-то уже сделал тест: документ jQuery.создать эквивалент элемента?

$(document.createElement('div')) большой победитель.

один момент заключается в том, что это может быть проще сделать:

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

затем, чтобы сделать все это с помощью вызовов jquery.

Я использую jquery.мин П2.0.3 . Это для меня лучше использовать следующее:

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

следующим образом:

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

время обработки первого кода намного меньше, чем второго кода.