如何使用HTML5模板標籤

HTML5 標籤存儲惰性，可重複使用的HTML內容，可以用JavaScript克隆；它一直沒有煩惱，直到編程插入為止，它是動態生成產品卡（例如無需重新加載或硬編碼）的元素的理想選擇，並且它支持高級功能，例如數據屬性和插槽，用於靈活，有條理和性能的DOM操作。

HTML5 <template></template>標籤是一種存儲HTML內容的方便方式，您不想在頁面加載時立即呈現。相反，您可以在以後使用JavaScript克隆並插入此內容。它非常適合動態添加諸如卡，表單或列表項目之類的元素，而無需重複反复或從外部來源獲取HTML。

這是有效使用它的方法。

模板標籤做什麼

<template></template>元素保存的內容是：

• 文檔加載時未在頁面上渲染。
• 解析但惰性- 腳本不運行，圖像不加載，自定義元素未升級。
• 可在需要時通過JavaScript克隆。

這使得它非常適合在即時創建的可重複使用的UI組件。

基本用法示例

假設您想將產品卡動態添加到頁面上。

 <template ID =“產品卡片 - 板”>
  <div class =“ product-card”>
    <h3 class =“ product-title”> </h3>
    <p class =“ product-price”> </p>
    <按鈕>立即購買</button>
  </div>
</template>

<div ID =“ product-container”> </div>

現在使用JavaScript克隆模板並填充它：

 //獲取模板和容器
const template = document.getElementById（'product-card-template'）;
const容器= document.getElementById（'product-container'）;

//功能添加新產品
功能addProduct（標題，價格）{
  //克隆模板內容
  const clone = document.importnode（template.content，true）;

  //更新克隆的元素
  clone.queryselector（'。product-title'）。 textContent = title;
  clone.queryselector（'。product-price'）。 textContent =`$$ {price}`;

  //附加到容器上
  Container.AppendChild（clone）;
}

//添加一些產品
AddProduct（“筆記本電腦”，999）;
AddProduct（“鼠標”，25）;

現在出現了兩張產品卡 - 從模板創建。

使用模板時的要點

• 使用document.importNode()或template.content.cloneNode()
  始終克隆模板的.content （這是DocumentFragment範圍）。這避免了修改原始模板。

• 深克隆與true
  將true作為第二個參數將其傳遞給importNode()或cloneNode()以確保複製所有子節點。

• 模板不限於一種用途
  您可以使用相同的模板在應用程序上創建多個實例。

• 與Shadow DOM和Web組件合作良好
  模板通常在自定義元素中用於定義內部結構。

• 無需使用CSS隱藏模板
  <template>內部的內容不會自動顯示 - 無display: none 。

高級：帶有數據屬性或插槽的預填充模板

您可以使用data-*屬性或<slot>元素設計更靈活的模板（特別有用Web組件）。

 <template ID =“用戶卡”>
  <div class =“用戶卡”>
    <img src =“” alt =“” class =“ avatar”>
    <h2 class =“ name”> </h2>
    <span class =“角色” data-lole> </span>
  </div>
</template>

然後根據JavaScript中的需要填寫包括src ， alt和數據屬性在內的值。

基本上， <template></template>標籤為您提供了一種干淨，性能的方法來管理可重複使用的HTML。它不是浮華的，但是它可以使您的DOM保持清潔和動態內容。

以上是如何使用HTML5模板標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！