каков наиболее эффективный способ создания элементов html с использованием jquery?

<p>в последнее время я делал много модальных всплывающих окон и что нет, для чего я использовал jquery. метод, который я использовал для создания новых элементов на странице, в подавляющем большинстве случаев был следующим:</p><pre><code>$(""); однако у меня возникает ощущение, что это не самый лучший или самый эффективный способ сделать это. каков наилучший способ создания элементов в jquery с точки зрения производительности? <a href="https://stackoverflow.com/a/268520/32943">этот ответ имеет критерии для предложений ниже.

лично я бы предложил (для удобства чтения):$('<div>'); </code></pre><p>некоторые цифры в предложениях (safari 3.2.1/mac os x):</p><pre><code>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 = $(''); // ~3200ms var e = $('<div/>'); // ~3500ms </code></pre>

<h2>вопрос:</h2><blockquote> <p>каков наиболее эффективный способ создания элементов html с использованием jquery?</p> </blockquote><h2>ответ:</h2><p>поскольку речь идет о <code>jquery</code>, то я думаю, что лучше использовать этот (чистый) подход (вы используете)</p><pre><code>$('<div/>', { 'id':'mydiv', 'class':'myclass', 'text':'text only', }).on('click', function(){ alert(this.id); // mydiv }).appendto('body');  <a href="http://jsfiddle.net/heera/rgerb/">демо. таким образом, вы даже можете использовать обработчики событий для конкретного элемента, такого как$('<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'); </code></pre><p> <a href="http://jsfiddle.net/heera/rgerb/1/">демо.</a> </p><p>но когда вы имеете дело с большим количеством динамических элементов, вам следует избегать добавления события <code>handlers</code> в конкретный элемент, вместо этого вы должны использовать делегированный обработчик события, например</p><pre><code>$(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'); } </code></pre><p> <a href="http://jsfiddle.net/heera/rgerb/3/">демо.</a> </p><p>таким образом, если вы создаете и добавляете сотни элементов с одинаковым классом, то есть (<code>myclass</code>), тогда для обработки событий будет расходоваться меньше памяти, поскольку для всех динамически вставленных элементов будет работать только один обработчик.</p><p><strong> обновление: </strong> поскольку мы можем использовать следующий подход для создания динамического элемента</p><pre><code>$('<input/>', { 'type': 'text', 'value':'some text', 'size': '30' }).appendto("body"); но атрибут size не может быть установлен с использованием этого подхода с использованием jquery-1.8.0 или более поздней версии, и здесь есть старый <a href="http://bugs.jquery.com/ticket/12429">отчет об ошибках , посмотрите на <a href="http://jsfiddle.net/heera/rgerb/">этот пример с использованием jquery-1.7.2, который показывает, что атрибут size установите в 30, используя приведенный выше пример, но используя тот же подход, мы не можем установить атрибут size, используя jquery-1.8.3, здесь <a href="http://jsfiddle.net/rgerb/7/">нерабочая скрипка . итак, чтобы установить атрибут size, мы можем использовать следующий подход$('<input/>', { 'type': 'text', 'value':'some text', attr: { size: "30" } }).appendto("body"); </code></pre><p>или этот</p><pre><code>$('<input/>', { 'type': 'text', 'value':'some text', prop: { size: "30" } }).appendto("body"); мы можем передать attr/prop как дочерний объект, но он работает в проверке версий jquery-1.8.0 and later <a href="http://jsfiddle.net/rgerb/8/">этот пример , но это <a href="http://jsfiddle.net/rgerb/9/">не будет работать в jquery-1.7.2 or earlier (не тестировалось во всех более ранних версиях).кстати, взято из сообщения об ошибке jquery<blockquote> есть несколько решений. первый - вообще не использовать его, поскольку он не экономит место, а это улучшает ясность кода: </blockquote>они посоветовали использовать следующий подход ( <a href="http://jsfiddle.net/rgerb/11/">работает в более ранних версиях , также протестировано в 1.6.4)$('<input/>') .attr( { type:'text', size:50, autofocus:1 } ) .val("some text").appendto("body"); </code></pre><p>итак, лучше использовать этот подход, имо. это обновление сделано после того, как я прочитал/нашёл <a href="https://stackoverflow.com/a/19576388/741747">этот ответ</a> и в этом ответе показано, что если вы используете <code>'size'(capital s)</code> вместо <code>'size'</code>, то это будет просто <a href="http://jsfiddle.net/g9hct/1/">работает нормально</a> , даже в <code>version-2.0.2</code></p><pre><code>$('<input>', { 'type' : 'text', 'size' : '50', // size won't work 'autofocus' : 'true' }).appendto('body'); также читайте о <a href="http://api.jquery.com/prop/">prop , потому что есть разница, attributes vs. properties, она зависит от версии.

на самом деле, если вы делаете $('<div>')</code>, jquery также будет использовать <code>document.createelement()</code>.</p><p>(просто посмотрите на <a href="http://code.jquery.com/jquery-1.4.2.js">строка 117</a> ).</p><p>существуют некоторые накладные расходы при вызове функции, но если производительность не критична (вы создаете сотни [тысяч] элементов), нет особых причин возвращаться к обычному <strong>dom</strong>.</p><p>просто создание элементов для новой веб-страницы - это, вероятно, тот случай, когда вам лучше всего придерживаться <strong> способа jquery </strong>.</p>

<p>это не правильный ответ на вопрос, но все же я хотел бы поделиться этим ...</p><p>использование только <code>document.createelement('div')</code> и пропуск jquery значительно улучшат производительность, если вы хотите создать множество элементов на лету и добавить в dom.</p>

<p>я думаю, что вы используете лучший метод, хотя вы можете оптимизировать его для:</p><pre><code> $("<div/>"); 

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

вы должны понимать, что значение производительности создания элемента не имеет значения в контексте использования jquery в первую очередь.имейте в виду, что нет реальной цели создания элемента, если вы на самом деле не собираетесь его использовать.у вас может возникнуть соблазн протестировать что-то вроде $(document.createelement('div'))</code> против <code>$('') и получить большой выигрыш в производительности от использования $(document.createelement('div'))</code>, но это всего лишь элемент, которого пока нет в dom.</p><p>однако, в конце концов, вы все равно захотите использовать элемент, поэтому реальный тест должен включать f.ex. .добавить в();</p><p>давайте посмотрим, если вы проверяете следующее друг против друга:</p><pre><code>var e = $(document.createelement('div')).appendto('#target'); var e = $('<div>').appendto('#target'); var e = $('').appendto('#target'); var e = $('<div/>').appendto('#target'); </code></pre><p>вы заметите, что результаты будут отличаться. иногда один способ лучше, чем другой. и это только потому, что количество фоновых задач на вашем компьютере со временем меняется.</p><p><strong> <a href="http://jsperf.com/jquery-create-html">проверьте себя здесь</a> </strong></p><p>итак, в конце концов, вы хотите выбрать самый маленький и самый читаемый способ создания элемента. таким образом, по крайней мере, ваши файлы сценариев будут минимально возможными. вероятно, более существенный фактор с точки зрения производительности, чем способ создания элемента перед его использованием в dom.</p>

<p>кто-то уже сделал тест: <a href="https://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent">эквивалент jquery document.createelement?</a> </p><p><code>$(document.createelement('div')) - большой победитель.

один момент заключается в том, что это может быть проще сделать:$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>") </code></pre><p>затем сделать все это с помощью вызовов jquery.</p>

<p>я использую jquery.min v2.0.3. для меня лучше использовать следующее:</p><pre><code>var select = jquery("#selecter"); jquery("`<option/>`",{value: somevalue, text: sometext}).appendto(select); </code></pre><p>следующим образом:<br></p><pre><code>var select = jquery("#selecter"); jquery(document.createelement('option')).prop({value: somevalue, text: sometext}).appendto(select); </code></pre><p>время обработки первого кода намного меньше, чем второго кода.</p>