title: Using jQuery .load to add rows to an html table
body: <p>The code below adds the <code>html</code> returned by <code>returndatafromdb2()</code> function in the server to the table that has id <code>resultstable2</code>. The html returned by the function <code>returndatafromdb2()</code> is of the form:</p>
  
  <pre><code>"&lt;tr&gt;&lt;td&gt;some text&lt;/td&gt;&lt;td&gt;more text&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;some text&lt;/td&gt;&lt;td&gt;more text&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;some text&lt;/td&gt;&lt;td&gt;more text&lt;/td&gt;&lt;/tr&gt;"
  </code></pre>
  
  <p>As you can see in the code I am using <code>.load()</code> from jquery to obtain the <code>html</code> from the server and add it to the table. The code I am using, however, replaces the existing rows in the table instead of adding to it. How can I use jQuery <code>.load()</code> function to add the rows to existing rows and not replace them? </p>
  
  <p>If I can somehow assign the html received from the <code>.load()</code> function to a variable say <code>newhtml</code>, I can do something like <code>$(newhtmltext).appendTo('#resultstable2')</code>. But I don't know how to assign the html obtained by <code>.load()</code> to a variable, or to use it as a string.</p>
  
  <p><strong>The Code:</strong>
      <h1>Create table using jquery</h1></p>
  
  <pre><code>&lt;p&gt;Method 2&lt;/p&gt;
  
      &lt;table id="resultstable2"&gt;
          &lt;tr&gt;
              &lt;th&gt;Grade&lt;/th&gt;
              &lt;th&gt;Price&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
  &lt;button id="b2"&gt;Execute returndatafromdb2()&lt;/button&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $.ajaxSetup({
          cache: false
      });
  
  
      var getdata2 = function(){
          var loadurl2 = "{{=URL('default', 'returndatafromdb2')}}";
          $('#resultstable2').load(loadurl2));
      };
  
      $('#b2').click(getdata2);
  
  &lt;/script&gt;
  </code></pre>