title: jquery append data to html according to order number
body: <p>I need to build a list with 6 <code>li</code>'s and their values (empty or not) and then append it to an existing <code>li</code>.</p>
  
  <p>Having these results in return from an sql query:</p>
  
  <pre><code>id_news  title      category  order
  -------  --------   --------  -----
  3        Alex...    12        1
  12415    Obama...   3         3
  </code></pre>
  
  <p>With that data I need to build an in order by <code>order</code> list, and by that I mean that the list should be something like:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li data-order="1"&gt; Alex... &lt;/li&gt;
      &lt;li data-order="2"&gt; No featured news here, click to add &lt;/li&gt;
      &lt;li data-order="3"&gt; Obama... &lt;/li&gt;
      &lt;li data-order="4"&gt; No featured news here, click to add &lt;/li&gt;
      &lt;li data-order="5"&gt; No featured news here, click to add &lt;/li&gt;
      &lt;li data-order="6"&gt; No featured news here, click to add &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>So, my questions are: </p>
  
  <ul>
  <li>Should I have a predefined list and add data there?</li>
  <li>Or, should I do it while building the list? If so, how?</li>
  </ul>
  
  <p>The jQuery code that I have by now:</p>
  
  <pre><code>var sublist = '&lt;ul id="order_list"&gt; &lt;h3&gt; Order list: &lt;/h3&gt;';
  $.each(data, function(index, value) {
    sublist += '&lt;li data-target="'+value['id_news']+'"&gt;'+value['headline']+'&lt;/li&gt;';
  });
  sublist += '&lt;/ul&gt;';
  list.append(sublist);
  </code></pre>