HTML <template> 標籤
示例
使用 <template> 來儲存一些在頁面載入時隱藏的內容。使用 JavaScript 來顯示它。
<button onclick="showContent()">顯示隱藏內容</button>
<template>
<h2>花</h2>
<img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
function showContent() {
let temp = document.getElementsByTagName("template")[0];
let clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
<template> 標籤用作容器，用於儲存一些在頁面載入時對使用者隱藏的 HTML 內容。
<template> 內部的內容可以在以後使用 JavaScript 渲染。
如果您有一些想反覆使用但又不想在需要時才使用的 HTML 程式碼，可以使用 <template> 標籤。如果**沒有** <template> 標籤，您必須使用 JavaScript 建立 HTML 程式碼，以防止瀏覽器渲染該程式碼。
瀏覽器支援
| 元素 | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
全域性屬性
<template> 標籤支援 HTML 中的全域性屬性。
更多示例
示例
使用陣列中的每個專案填充網頁的一個新 div 元素。每個 div 元素的 HTML 程式碼都在 template 元素內。
<template>
<div class="myClass">我喜歡: </div>
</template>
<script>
let myArr = ["奧迪", "寶馬", "福特", "本田", "捷豹", "日產"];
function showContent() {
let 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>
自己動手試一試 »
示例
檢查瀏覽器對 <template> 的支援
<script>
if (document.createElement("template").content) {
document.write("您的瀏覽器支援模板!");
} else {
document.write("您的瀏覽器不支援模板!");
}
</script>
自己動手試一試 »
