Building UI dynamically with jQuery
<p>Usually if I ever need to create new UI elements dynamically with jquery I just create a string of HTML and append that to an element using the .appendTo() method.</p>

<p>For example:</p>

<pre><code>var i=0;
for (i=0;i&lt;=5;i++)
{
  $('&lt;div id="box" + i&gt;&lt;h1&gt;Test&lt;/h1&gt;&lt;p&gt;This is a test&lt;/p&gt;&lt;/div&gt;').appendTo('#Wrapper');
}
</code></pre>

<p>However, in this case I need to create a drop down select list as part of the UI that is bound to values provided by the server using the jquery ajax() method.</p>

<pre><code>$('&lt;div id="box" + i&gt;&lt;h1&gt;Test&lt;/h1&gt;&lt;select&gt;[The items must be created by an AJAX call to the server ]&lt;/select&gt;&lt;/div&gt;').appendTo('#Box');
</code></pre>

<p>Is the best way to do this to call the ajax() method and create an array of items before parsing them to a string and then appending the string?</p>

<p>Or is there a more sophisticated way of doing this?</p>
