title: How to add <tr> tag to <table> tag dynamically in pure javascript?
body: <p>code in html file is as following:</p>
  
  <pre><code>&lt;html&gt;
      &lt;script type="text/javascript"&gt;
         var records=[{"name":"Fred","id":"123"},{"name":"Jim","id":"456"}];
      &lt;/script&gt;
      &lt;table id="tb1"&gt;
          &lt;tr id="row1"&gt;
              &lt;td style="background-color:gray" id="name"&gt;name&lt;/td&gt;&lt;td style="background-color:gray" id="id"&gt;id&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr id="row2"&gt;&lt;td&gt;shouldn't be added here&lt;/td&gt;&lt;td&gt;neither here&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to add the contents of records between row1 and row2 in pure javascript.(without any third party javascript framework) What should I do?</p>