<template>

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

개요

The HTML template element <template> is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript. 

Think of a template as a content fragment that is being stored for subsequent use in the document. The parser does process the content of the <template> element during the page load to ensure that it is valid, however.

속성

This element includes the global attributes.

There is also a content attribute, which is read-only. It provides access to the contents of the template. The existence of the content attribute is often used as a way of determining if a particular browser supports the <template> element.

예제

First we start with the HTML portion of the example.

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>

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

Then we see the JavaScript portion of the example, which can be used to instantiate the HTML.

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {

  // Instantiate the table with the existing HTML tbody and the row with the template
  var t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // Clone the new row and insert it into the table
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);
  
  // Create a new row
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // Clone the new row and insert it into the table
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);

} else {
  // Find another way to add the rows to the table because 
  // the HTML template element is not supported.
}

The result is the original HTML table, with two new rows appended to it via JavaScript.

You can see a live example here (code is displayed here).

사양

사양 상태 주석
WHATWG HTML Living Standard
The definition of 'template element' in that specification.		 Living Standard No change
HTML5
The definition of 'template element' in that specification.		 Recommendation Initial definition

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 26 22 (22) Not supported 15 7.1
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? iOS 8

같이 보기

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: azunyan3
 최종 변경: azunyan3,