Databases
StackOverflow2013
Postsdbo
POjQuery DOM manipulation efficiency - building entire page with JavaScript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery DOM manipulation efficiency - building entire page with JavaScript
    primarykey
    data
    text
    <p>I'm going to be starting off with a completely blank page (no elements other than html, head and body) and will then build the page using jQuery. The page contents will be in the form of JSON from an AJAX request. The contents from JSON will not have any HTML. The HTML with content will be built for different sections of the page depending on the structure of the JSON object. </p> <p>This page will have various sliders, modals and other "dynamic" content.</p> <p>My question is, will it be faster (lets take IE7 as the lowest common denominator) to build the HTML as one large string (using a string builder which is much faster than standard concatenation) and inject this into the body in a bulk fashion, i.e.</p> <pre><code>var html = "&lt;div id='content'&gt;&lt;p&gt;All markup required for the page, built from the contents of the JSON object&lt;/p&gt;&lt;/div&gt;&lt;div id='slider'&gt;...&lt;/div&gt;...etc." $("body").html(html) </code></pre> <p>And then when that is in the DOM, use jQuery to find and apply plugins to the various dynamic parts, i.e.</p> <pre><code>$("#slider").sliderPlugin(options); </code></pre> <p><strong>OR</strong></p> <p>Would it be better to create each element (or some) as a variable, then append to the body? i.e.</p> <pre><code>var content = $('&lt;div/&gt;', {id: "content"}) var slider = $('&lt;div/&gt;', {id: "slider", html="&lt;ul&gt;&lt;li&gt;...&lt;/li&gt;&lt;/ul&gt;"}).appendTo(content); $('body').append(content) </code></pre> <p>then with this approach I don't have to query the DOM, I only have to do this:</p> <pre><code>slider.sliderPlugin(options); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USWiseOwl9000
    1. USFergal
    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. POjQuery DOM manipulation efficiency - building entire page with JavaScript
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POjQuery DOM manipulation efficiency - building entire page with JavaScript
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POjQuery DOM manipulation efficiency - building entire page with JavaScript
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhy would you do this? If you're going to emit the markup as a string variable in javascript, why not just create it in the body?
      singulars
      1. POjQuery DOM manipulation efficiency - building entire page with JavaScript
      1. UStvanfosson
    2. COI don't see the point in "why would you do this" questions. But, to summarize, platform restrictions, JSON content is changeable, so different JSON = different page output, the markup is not contained in JSON, just the contents of each area of the page, the markup is generated depending on the JSON strucutre. In future this allows different markup to be used for the same JSON, so the layout can be upgraded without reformating the source content.
      singulars
      1. POjQuery DOM manipulation efficiency - building entire page with JavaScript
      1. USFergal
    3. COFair enough. I was just curious. I would probably deliver partial HTML views through AJAX instead of JSON and construct the HTML from the model on the server. I suppose, though, that there are instances where the data server isn't the same as the web server. I just find that building HTML up from strings is rather tedious and error prone. You might want to consider using http://knockoutjs.com
      singulars
      1. POjQuery DOM manipulation efficiency - building entire page with JavaScript
      1. UStvanfosson
 

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