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

html

<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>

js

// 템플릿 엘리먼트의 컨텐츠 존재 유무를 통해
// 브라우저가 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;
}