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

HTML <template> 요소는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공합니다.

템플릿은 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너로 생각하세요. 페이지를 불러오는 동안 구문 분석기가 <template> 요소의 콘텐츠도 읽기는 하지만, 이는 유효성을 검증하기 위함이며 렌더링 하기 위함은 아닙니다.

콘텐츠 카테고리 메타데이터 콘텐츠, 플로우 콘텐츠, 구문 콘텐츠, 스크립트 지원 요소.
가능한 콘텐츠 제한 없음.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 메타데이터 콘텐츠, 구문 콘텐츠, 또는 스크립트 지원 요소를 허용하는 모든 요소. 또한, span 특성이 없는 <colgroup> 요소도 가능.
가능한 ARIA 역할 없음
DOM 인터페이스 HTMLTemplateElement

특성

이 요소는 전역 특성만 포함합니다.

다만, HTMLTemplateElement는 읽기 전용 content 속성을 가집니다. content는 템플릿이 담고 있는 DOM 하위 트리를 나타내는 DocumentFragment입니다.

예제

우선 예제의 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> 

먼저, 나중에 JavaScript 코드를 사용해 컨텐츠를 삽입할 테이블이 있습니다. 그 다음 테이블의 열을 표현하는 HTML 조각의 구조를 설명하는 템플릿이 옵니다.

이제 테이블이 생성되었고 템플릿이 정의되었으므로, JavaScript 를 사용해 템플릿을 사용해 구성된 열을 기반으로 각 열을 테이블로 삽입합니다.

// 템플릿 엘리먼트의 컨텐츠 존재 유무를 통해
// 브라우저가 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 템플릿 엘리먼트를 지원하지 않으므로
  // 테이블에 열을 추가하는 다른 방법을 찾습니다.
}

결과는 JavaScript 를 통해 추가된 두 개의 새로운 열을 포함하는 기존 HTML 테이블입니다.

명세

Specification Status Comment
HTML Living Standard
The definition of 'template element' in that specification.
Living Standard
HTML5
The definition of 'template element' in that specification.
Recommendation Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
templateChrome Full support 26Edge Full support 13Firefox Full support 22IE No support NoOpera Full support 15Safari Full support 8WebView Android Full support YesChrome Android Full support 26Firefox Android Full support 22Opera Android ? Safari iOS Full support 8Samsung Internet Android Full support 1.5

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

같이 보기