<template>: 콘텐츠 템플릿 요소

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- 존재하는 데이터는 선택적으로 여기에 포함됩니다 -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

// 템플릿 엘리먼트의 컨텐츠 존재 유무를 통해
// 브라우저가 HTML 템플릿 엘리먼트를 지원하는지 확인합니다
if ('content' in document.createElement('template')) {

    // 기존 HTML tbody 와 템플릿 열로 테이블을 인스턴스화합니다
    var t = document.querySelector('#productrow');

    // 새로운 열을 복제하고 테이블에 삽입합니다
    var tb = document.querySelector("tbody");
    var clone = document.importNode(t.content, true);
    td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tb.appendChild(clone);

    // 새로운 열을 복제하고 테이블에 삽입합니다
    var clone2 = document.importNode(t.content, true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tb.appendChild(clone2);

} else {
  // HTML 템플릿 엘리먼트를 지원하지 않으므로
  // 테이블에 열을 추가하는 다른 방법을 찾습니다.
}

table {
  background: #000;
}
table td {
  background: #fff;
}