template 태그

<template> 태그는 HTML5에서 새롭게 추가된 요소이다.
template 태그는 필요시에 원하는 위치의 HTML에 추가하거나 복사하여 계속 붙여넣을 수 있게 틀을 미리 만들어 놓는 태그이다.

• 태그 안에 요소들은 페이지 로드될 때 바로 렌더링 되지 않으며 자바스크립트를 사용하여 HTML에 보이도록 렌더링 하기 전까지 사용자에게 보이지 않는다.
• 또한 template 요소를 추가하기 전까지 모든 컨텐츠에 side-effect는 전혀 없다.
• 자바스크립트를 사용하여 template 태그를 복제한 후 HTML에 보이도록 렌더링할 수 있다.
• template 요소들은 계속해서 사용할 수 있다.

mdn의 예제

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

<template id="product-row">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

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

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

    // 새로운 열을 복제하고 테이블에 삽입합니다
    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 템플릿 엘리먼트를 지원하지 않으므로
  // 테이블에 열을 추가하는 다른 방법을 찾습니다.
}

자바스크립트로 template 요소를 추가하기 전

자바스크립트로 template 요소를 추가한 후