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

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

$('<div>');

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

DEMO.

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

$('<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.

Но когда вы имеете дело с большим количеством динамических элементов, вам следует избегать добавления события 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');
}

DEMO.

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

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

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

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

$('<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 (не тестируется во всех более ранних версиях).

BTW, взятый из отчета об ошибке 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.

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

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

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

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

 $("<div/>");

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

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

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

У вас может возникнуть соблазн выполнить тест производительности, например $(document.createElement('div')) vs. $('<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');

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

Проверьте себя здесь

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

Кто-то уже сделал контрольный показатель: jQuery document.createElement эквивалент?

$(document.createElement('div')) является большим победителем.

Одно дело, что это может быть проще сделать:

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

Затем сделать все это с помощью jquery-вызовов.

Я использую jquery.min v2.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);

Время обработки первого кода намного ниже второго кода.

Предположим, что у нас есть сценарий для динамического замены содержимого HTML-тегами для форматирования, мы не можем использовать $('#id').text();, потому что он не примет текст с html, отформатированным как жирный текст, чтобы для этого нам нужно использовать jQuery append, но как альтернативу методу .text() просто пустое время, когда нам нужно обновлять и использовать метод append.

var fileImportStatus;
$('#id').change(function() {
    if ($('#id').is(':checked')) {
        fileImportStatus = "<strong>ON</strong>";
    } else {
        fileImportStatus = "<strong>OFF</strong>";
    }
});
$('#saveBtn').click(function() {
    $('#fileImportStatusTxt').empty();
    $('#fileImportStatusTxt').append('File Import is ' + fileImportStatus);
});