Який найефективніший спосіб створити HTML-елементи за допомогою jQuery?

Останнім часом я роблю багато модальних спливаючих вікон, а що ні, для чого я використовував jQuery. Метод, який я використовував для створення нових елементів на сторінці, в основному був уздовж наступних напрямків:

$("<div></div>");

Однак у мене виникає відчуття, що це не найкращий чи найефективніший спосіб зробити це. Який найкращий спосіб створити елементи в jQuery з точки зору продуктивності?

Ця відповідь має орієнтири для поданих нижче пропозицій.

Я використовую $(document.createElement('div')); тести показує, що ця техніка є найшвидшою. Я припускаю, що це тому, що jQuery не повинен ідентифікувати його як елемент і створювати сам елемент.

Ви дійсно повинні запускати орієнтири з різними двигунами Javascript і зважувати свою аудиторію за результатами. Прийміть рішення звідти.

особисто я запропонував (для читабельності):

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

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допомогою описаного вище прикладу , але використовуючи той же підхід , який ми не можемо набір 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');

Читайте також про технічну підтримку , оскільки є різниця 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');

Ви помітите, що результати будуть різними. Іноді один спосіб є більш ефективним, ніж інший. І це лише тому, що кількість фонових завдань на вашому комп’ютері змінюється з часом.

Перевірте себе тут

Отже, зрештою, ви хочете вибрати найменший і найчитабельніший спосіб створення елемента. Таким чином, принаймні, ваші файли скриптів будуть найменшими. Можливо, більш вагомий фактор точки продуктивності, ніж спосіб створення елемента, перш ніж використовувати його в 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);

Час обробки першого коду набагато менший, ніж другого коду.