title: jQuery appended table adds closing tag at the end of the text automatically. Why?
body: <pre><code>$('#all_locations').append("&lt;table&gt;");
  $('#all_locations').append("&lt;tr&gt;&lt;th&gt;City&lt;/th&gt;&lt;/tr&gt;");
  
  $.each(data, function(i, item){
      $('#all_locations').append("&lt;tr&gt;");
      $('#all_locations').append("&lt;td&gt;"+item.city+"&lt;/td&gt;");
      $('#all_locations').append("&lt;tr&gt;");
  }
  
  $('#all_locations').append("&lt;/table&gt;");
  </code></pre>
  
  <p>Output gotten using <code>alert($('#all_locations').html());</code></p>
  
  <pre><code>&lt;table&gt;&lt;/table&gt;
  &lt;tr&gt;&lt;th&gt;City&lt;/th&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;/tr&gt;&lt;td&gt;Seattle&lt;/td&gt;
  &lt;tr&gt;&lt;/tr&gt;&lt;td&gt;Chicago&lt;/td&gt;
  </code></pre>
  
  <p>This code fires when ajax call is finished. Any ideas why is it doing so?</p>
  
  <p>Assume that data variable is the valid JSON object.</p>