Databases
StackOverflow2013
Postsdbo
POProper way to generate html dynamically with jQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProper way to generate html dynamically with jQuery
    primarykey
    data
    text
    <p>I found some different and conflicting answers on this topic.</p> <p>I am building an application which works mostly with html dynamically generated by jQuery, based on results acquired from underlying API in form of JSON data.</p> <p>I was told by some of my collegues (personally), that the best way would be to do something like this:</p> <pre><code>var ul = $("&lt;ul&gt;").addClass("some-ul"); $.each(results, function(index) { ul.append($("&lt;li&gt;").html(this).attr("id", index)); }); $("body").append($("&lt;div&gt;").attr("id", "div-id").addClass("some-div").append(ul)); </code></pre> <p>etc. The reason I was told it was that "updates the DOM directly instead of parsing html to achieve it".</p> <p>However, I see lots of code like this (same example):</p> <pre><code>var toAppend = '&lt;div class="some-div" id="div-id"&gt;&lt;ul&gt;'; $.each(results, function(index) { toAppend += '&lt;li id="' + index + '"&gt;' + this + '&lt;/li&gt;'; }); toAppend += '&lt;/ul&gt;&lt;/div&gt;' </code></pre> <p>Which I personally consider as not as elegant - but is it better? I googled the issue for a couple of minutes and found <a href="http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly" rel="noreferrer">this article</a>. Basically, it is about increasing performance drastically by using string concatenation - my "second way".</p> <p>The main issue of this article is that it has been released in 2009 and discussed jQuery version is 1.3. Today, the current release is version 1.6.4 which can behave quite differently. And this is the issue of most articles on the subject I have already found and I'm also somehow suspicious about their credibility.</p> <p>That's why I have decided to post the question here and ask - which method of generating DOM is actually the proper one, based on performance?</p> <p>IMPORTANT EDIT:</p> <p>I have written a little benchmark to test which approach is better considering performance.</p> <p><a href="http://jsfiddle.net/C4Ymm/8/" rel="noreferrer">jsFiddle</a> - concatenation version</p> <p><a href="http://jsfiddle.net/C4Ymm/1/" rel="noreferrer">jsFiddle</a> - array join version</p> <p>Code:</p> <pre><code>var text = "lorem ipsum"; var strings = $("#strings"); var objects = $("#objects"); var results = $("#results"); // string concatenation var start = new Date().getTime(); var toAppend = ['&lt;div class="div-class" id="div-id1"&gt;&lt;ul class="ul-class" id="ul-id1"&gt;']; for (var i = 1; i &lt;= 20000; i++) { toAppend[i] = '&lt;li class="li-class" id="li-id1-' + i + '"&gt;' + text + '&lt;/li&gt;'; } toAppend[i++] = '&lt;/ul&gt;&lt;/div&gt;'; results.append(toAppend.join("")); strings.html(new Date().getTime() - start); // jquery objects var start = new Date().getTime(); var ul = $("&lt;ul&gt;").attr("id", "ul-id2").addClass("ul-class"); for (var i = 0; i &lt; 20000; i++) { ul.append($("&lt;li&gt;").attr("id", "li-id2-" + i).addClass("li-class")); } results.append($("&lt;div&gt;").attr("id", "div-id2").addClass("div-class").append(ul)); objects.html(new Date().getTime() - start); </code></pre> <p>It seems that operating on strings is faster (in Firefox 7 about 7 times) than using jQuery objects and methods. But I can be wrong, especially if there are any mistakes or performance-decreasing bugs in this "benchmark's" code. Feel free to make any changes.</p> <p>Note: I used Array <code>join</code> because of the article mentioned earlier instead of actual concatenation.</p> <p>EDIT: Based on suggestion by @hradac, I used actual string concatenation in the benchmark and it did in fact improve the times.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPrzemek
    1. USPrzemek
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POProper way to generate html dynamically with jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POProper way to generate html dynamically with jQuery
      1. USCorbin
      1. VTFavorite
    3. VO
      singulars
      1. POProper way to generate html dynamically with jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    1. COhttp://www.artzstudio.com/2009/04/jquery-performance-rules/
      singulars
      1. POProper way to generate html dynamically with jQuery
      1. USNimChimpsky
    2. COIf you do a lot of stuff like this, you might want to consider using jquery templating. It was built specifically to solve this problem. http://api.jquery.com/category/plugins/templates/
      singulars
      1. POProper way to generate html dynamically with jQuery
      1. USMalevolence
    3. CO@NimChimpsky I know this article and it's one of my guidelines everyday I'm developing jQuery. It covers a part of my problem but does not state which convention is better.
      singulars
      1. POProper way to generate html dynamically with jQuery
      1. USPrzemek
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload