Вопрос:
Какой самый эффективный способ создания 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 (не тестировался в все более ранние версии).
Кстати, взято из 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, она зависит от версии.