JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<div id="myDiv" style="padding-bottom:50px;">
<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  <template id="productrow">
  <tr>
    <td class="record">123</td>
    <td>abc</td>
  </tr>
</template> 
  </tbody>
</table>
</div>

<div id="test" style="width:50px;height:50px;background-color:red;">is</div>
<div id="test1" style="width:50px;height:50px;background-color:green;">is</div>

JavaScript

var t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);
  document.getElementById("myDiv").appendChild(document.getElementById("test"));
  document.getElementById("myDiv").appendChild(document.getElementById("test1"));
  //document.getElementsByTagName("tbody")[0].style.display="none";