title: JQuery append closing tag before data
body: <p>I am creating a Adobe Air application with jQuery support. However, the recursive function that I have closes the tag first and writes the data afterwards.</p>
  
  <p>My code is,</p>
  
  <pre><code>function displayTodoItems(id)
  {
   id = parseInt(id)
  
   if(!id)
    $("#todoLists").empty();
  
   var list = fetchTodoItems(id);
   if(list.data == null)
    return;
   var numRecords = list.data.length;  
  
   for (var i=0;i&lt;numRecords;i++)
   {  
    dateObj = new Date(list.data[i].date_created);
  
    time = dateObj.getFullYear()+"-"+ String("0"+dateObj.getMonth()).slice(-2)+"-"+ String("0"+dateObj.getDate()).slice(-2)+" "+  String("0"+dateObj.getHours()).slice(-2)+":"+ String("0"+dateObj.getMinutes()).slice(-2);
  
     $('#todoLists').append('&lt;div id="list'+list.data[i].id+'" class="listitem '+(id?'listitem-sub':'listitem-main')+'" style="background-color: #' + list.data[i].color + ';' +(list.data[i].color/2 &lt; 0x7FFFFF?' color: #FFF;':'')+ '"&gt;'+time+ '&lt;br&gt;' + unescape(list.data[i].data)+ '&lt;/div&gt;');
    //get child items
    displayTodoItems(list.data[i].id);
    $('#todoLists').append('&lt;/div&gt;');
  
   } 
  }
  </code></pre>
  
  <p>The reply I get is,</p>
  
  <pre><code>   &lt;div id="todoLists"&gt;
    &lt;div id="list1" class="listitem listitem-main" style="background-color: #fff;"&gt;2010-07-07 21:01&lt;br&gt;
      Hello Bongo Sister&lt;/div&gt;
    &lt;div id="list2" class="listitem listitem-main" style="background-color: #dd9900;"&gt;2010-07-07 21:08&lt;br&gt;
      Umer Idiot Thinks that we are using Aptima. Not knowing that we call this Aptana&lt;/div&gt;
    &lt;div id="list3" class="listitem listitem-main" style="background-color: #654562; color: #FFF;"&gt;2010-07-07 21:42&lt;br&gt;
      asdf asdfa sdfasdf asdf &lt;/div&gt;
    &lt;div id="list4" class="listitem listitem-main" style="background-color: #7FFFFF;"&gt;2010-07-08 12:40&lt;br&gt;
      Umar is a naughty boy&lt;/div&gt;
    &lt;div id="list5" class="listitem listitem-sub" style="background-color: #222; color: #FFF;"&gt;2010-07-08 12:46&lt;br&gt;
      Hello Great Boy&lt;/div&gt;
    &lt;div id="list6" class="listitem listitem-sub" style="background-color: #000000; color: #FFF;"&gt;2010-07-10 20:07&lt;br&gt;
      Farrukh You Idjt&lt;/div&gt;
    &lt;div id="list7" class="listitem listitem-main" style="background-color: #FF5500;"&gt;2010-07-18 21:45&lt;br&gt;
      Testing new Item&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is wrong, in that list5, list 6 are childs of list 4, so they should be in its div.</p>
  
  <p>I am really struggling. It seems that the jquery is calling append before the recursive function. Is there a way around this.</p>
  
  <p>Kind Regards,</p>
  
  <p>Khuram Javaid</p>