MDN之Web 開發技術(一)【template內容模板元素】

原文鏈接：https://blog.csdn.net/WuLex

HTML內容模板（<template>）元素是一種用於保存客戶端內容機制，該內容在加載頁面時不會呈現，但隨後可以在運行時使用JavaScript實例化。

將模板視爲一個內容片段，存儲在文檔中供後續使用。雖然解析器在加載頁面時確實會處理<template>元素的內容，但這樣做只是爲了確保這些內容有效；然而，元素的內容不會被呈現。

屬性

此元素僅包含全局屬性。
但， HTMLTemplateElement 有個屬性： content , 這個屬性是隻讀的DocumentFragment 包含了模板所表示的DOM樹。

示例

首先我們從示例的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實例化表和該行與模板
  let t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // 克隆新行並將其插入表中
  let tb = document.getElementsByTagName("tbody");
  let clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);
  
  // 創建一個新行
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // 克隆新行並將其插入表中
  let clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);

} else {
  // 找到另一種方法來添加行到表，因爲不支持HTML模板元素。
}

結果是原始的HTML表格，通過JavaScript添加了兩行新內容：