HTML <템플릿> 태그
예시
<템플릿>을 사용하여 페이지가 로드될 때 숨겨질 일부 콘텐츠를 보관합니다. JavaScript를 사용하여 표시:
<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214"
height="204">
</template>
<script>
function showContent() {
var temp =
document.getElementsByTagName("template")[0];
var clon =
temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
태그 는 <template>페이지가 로드될 때 사용자에게 숨겨진 일부 HTML 콘텐츠를 보관하는 컨테이너로 사용됩니다.
내부 콘텐츠 <template>는 나중에 JavaScript로 렌더링할 수 있습니다.
<template>반복해서 사용하고 싶은 HTML 코드가 있는 경우 태그를 사용할 수 있지만 요청할 때까지는 사용할 수 없습니다 . 태그 없이 이 작업을 수행하려면 <template>브라우저에서 코드를 렌더링하지 못하도록 JavaScript로 HTML 코드를 만들어야 합니다.
브라우저 지원
| Element | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
전역 속성
<template>태그는 HTML의 전역 속성을 지원 합니다 .
더 많은 예
예시
배열의 각 항목에 대해 하나의 새 div 요소로 웹 페이지를 채웁니다. 각 div 요소의 HTML 코드는 템플릿 요소 내부에 있습니다.
<template>
<div class="myClass">I like: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar",
"Nissan"];
function showContent() {
var temp, item, a,
i;
temp =
document.getElementsByTagName("template")[0];
item =
temp.content.querySelector("div");
for (i = 0; i < myArr.length; i++) {
a = document.importNode(item,
true);
a.textContent += myArr[i];
document.body.appendChild(a);
}
}
</script>
예시
<템플릿>에 대한 브라우저 지원 확인:
<script>
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
</script>