현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
개요
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.
- 콘텐츠 범주 Metadata content, flow content, phrasing content, script-supporting element
- 허용되는 콘텐츠 Metadata content, flow content, any valid HTML content that is permitted to occur within the
<ol>,<dl>,<figure>,<ruby>,<object>,<video>,<audio>,<table>,<colgroup>,<thead>,<tbody>,<tfoot>,<tr>,<fieldset>,<select>,<details>elements and<menu>whosetypeattribute is in popup menu state. - 태그 생략 None, both the starting and ending tag are mandatory.
- 허용되는 부모 요소들
<body>,<frameset>,<head>and<colgroup>without aspanattribute - DOM 인터페이스
HTMLTemplateElement
속성
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).
사양
| 사양 | 상태 | 주석 |
|---|---|---|
| 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 |
브라우저 호환성
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 26 | 22 (22) | No support | 15 | 7.1 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | iOS 8 |