title: Row added twice to table with jQuery
body: <p>I want to create a table with jquery. My code is like this:</p>
  
  <pre><code>function showGrid(url, container, columns, page) {
      jQuery(container).empty();
  
      var tr = jQuery("&lt;tr class=\"mobileGridHeader\"&gt;&lt;tr&gt;");
  
      var tdTotalRows = jQuery("&lt;td&gt;test&lt;/td&gt;");
      jQuery(tr).append(tdTotalRows);
  
      var table = jQuery('&lt;table class="mobileGrid"&gt;&lt;/table&gt;');
      jQuery(table).append(tr);
  
      jQuery(container).append(table);
  }
  </code></pre>
  
  <p>The container is a div on the page. The problem is, that the tr is added twice to the container and I do not know why.</p>
  
  <p><img src="https://i.stack.imgur.com/ixok0.png" alt="enter image description here"></p>
  
  <p>It is not just a Browser error, in the Html I can see the code twice.</p>
  
  <pre><code>&lt;table class="mobileGrid"&gt;
     &lt;tbody&gt;
         &lt;tr class="mobileGridHeader"&gt;
             &lt;td&gt;test&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
             &lt;td&gt;test&lt;/td&gt;
         &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The weird is also, that the css class "mobileGridHeader" is only added in the first row.</p>