Adding <tbody> by jquery redundant <br>
<p>I create one table by using jquery :</p>

<pre><code> &lt;div class="productlist" style="float:left;" id="productlist"&gt;
 &lt;script type="text/javascript" language="javascript"&gt;
    function loadMore() {
       var $parent = $("#productlist").empty();
       $parent.append('&lt;table id="myTable" cellpadding="0" cellspacing="0" width="100%" class="productlist" style="margin-left:4px; padding-top:2px;"&gt;&lt;tbody&gt;');
       var $table = $parent.find("#myTable &gt; tbody");
       var htmlRow = [
                     '&lt;tr align="center"&gt;',
                     '&lt;td align="center" id="colunm-product"&gt;',
                     '&lt;br /&gt;',
                     '&lt;div id="brand-item"&gt;&lt;a href="#" class="brand_id"&gt;&lt;img src="' + value.BrandImage + '" width = "85px"/&gt;&lt;/a&gt;&lt;/div&gt;',
                     '&lt;div id="product_image"&gt;&lt;a href="'+'&lt;%: Url.Content("~/") %&gt;' +'Products/ProductSpec/' + value.ID +'?dep='+ value.DepartmentID +'&amp;cat='+value.CategoryID+'&amp;tab=2" style="text-decoration:none"&gt;&lt;img src="' + value.PictureName + '" alt="Product" width="135px"/&gt;&lt;/a&gt;&lt;/div&gt;',
                     '&lt;/td&gt;',
                     '&lt;/tr&gt;'
                      ];
      $table.append(htmlRow.join(''));
      $("#myTable &gt; tbody").append('&lt;/tbody&gt;&lt;/table&gt;');
   }
  &lt;/script&gt;
</code></pre>

<p>And I call the function in document.ready. But the result is unexpected in my view: </p>

<pre><code> &lt;table id="myTable" cellpadding="0" cellspacing="0" width="100%" class="productlist" style="margin-left:4px; padding-top:2px;"&gt;
    &lt;tbody&gt;
      &lt;br/&gt;&lt;br/&gt;
      &lt;tr&gt; my data &lt;/tr&gt;
    &lt;/tbody&gt;&lt;/table&gt;
</code></pre>

<p>I don't know why there are <code>&lt;br&gt;&lt;br&gt;</code> in the table. How to avoid that problem?</p>

<p>Thanks.</p>
