HTML <template>用法及代碼示例

HTML <template> 標簽用於保存在頁麵加載時不會呈現的客戶端內容，但可以在運行時使用 JavaScript 對其進行實例化。

模板的內容在沒有使用 JavaScript 激活之前不會顯示。瀏覽器在加載頁麵時處理 <template> 元素的內容，以確保內容有效，但不會呈現內容。

當您想在 HTML 文檔中多次使用相同的內容而不進行任何更改時，它也很有用。

<template> 標簽可以放在 <head>、<body>、<frameset> 或 <table> 元素內的任何位置。

<template> 標簽是 HTML5 中新增的元素。

用法

<template>.........</template>

以下是關於 HTML <template> 標簽的一些規範

Display	None
開始標簽/結束標簽	開始和結束標記
Usage	Formatting

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML Template tag</title>
<style>
body{
  background-color:#e6e6fa;
}
</style>
</head>
<body>
  <h2>Example of template tag</h2>
  <button onclick="clickMe()">Click Me</button><br>
  
 <template id="mytemplate">
   <img src="bird.jpg" alt="bird's image" height="100" width="100">
   <script>
   alert("Thank you for choosing template. Click OK for image.")
   </script>
  </template>

<script>
   function clickMe() {
    var x= document.getElementsByTagName("template")[0];
    var clon = x.content.cloneNode(true);
    document.body.appendChild(clon);}
</script>
</body>
</html>

輸出：

屬性：

Tag-specific 屬性：

<template> 標簽不包含任何特定屬性。

全局屬性：

<template> 標簽支持 HTML 中的 Global 屬性。

支持瀏覽器

Element	Chrome	IE	Firefox	Opera	Safari
<template>	Yes	No	Yes	Yes	Yes

相關用法

注：本文由純淨天空篩選整理自 HTML <template> tag。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。