Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I think what you're after is a decent candidate for the new <a href="http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/" rel="nofollow">jQuery templates</a>. You can find <a href="http://www.borismoore.com/2010/09/introducing-jquery-templates-1-first.html" rel="nofollow">a tutorial here</a>, for example:</p> <pre><code>&lt;script id="myTemplate" type="text/x-jquery-tmpl"&gt; &lt;div id="myDiv${ID}"&gt; &lt;input type="text" id="myText${ID}" /&gt; &lt;/div&gt; &lt;/script&gt; </code></pre> <p>Then when using it, it would look like this:</p> <pre><code>$("#myTemplate").tmpl([{ID: 1}]).appendTo("#something"); </code></pre> <p>This is just an example, your IDs should be unique and not duplicated anywhere in the page, even as a result of appending them through JavaScript. If you want a template to reuse this is a pretty flexible way to do, more so if you're passing data as well, for example:</p> <pre><code>&lt;script id="myTemplate" type="text/x-jquery-tmpl"&gt; &lt;div id="myDiv${ID}"&gt; &lt;input type="text" id="myText${ID}" value="${Val}" /&gt; &lt;/div&gt; &lt;/script&gt; </code></pre> <p>And just add that property in:</p> <pre><code>$("#myTemplate").tmpl([{ID: 1, Val: "Test"}]).appendTo("#something"); </code></pre> <p>Or you could pass an array to <a href="http://api.jquery.com/tmpl/" rel="nofollow"><code>.tmpl()</code></a> to make many of these at once, as the result of a JSON response, etc. Also based on your comment, yes you can also get the template from as an external file, <a href="http://encosia.com/2010/10/05/using-external-templates-with-jquery-templates/" rel="nofollow">like this</a>.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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.
 

Querying!

 
Guidance

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