使用HTML模板標籤使用可重複使用的內容片段

在網頁開發中，復用內容片段是一個很常見的需求。比如導航欄、頁腳、按鈕組件等，往往需要在多個頁面中重複使用。如果每次都手動複製粘貼，不僅效率低還容易出錯。 HTML 提供了一個<template></template>標籤，可以很好地幫助我們實現“可重用內容片段”的管理。

什麼是<template></template>標籤？

<template></template>是HTML5 引入的一個標籤，它允許你定義一段不會立即渲染的內容，但可以在之後通過JavaScript 動態插入到頁面中。你可以把它理解為一個“內容容器”，裡面可以包含HTML、CSS 和JS 的組合，只有在被激活時才會真正生效。

它的特點是：

• 內容默認不顯示
• 不會被瀏覽器解析執行（例如script 或img）
• 可以包含任何合法的HTML 內容

這使得它非常適合用來存放可複用的UI 片段。

如何使用<template></template>創建可複用內容？

基本的使用流程是：先定義模板→ 然後克隆內容→ 最後插入到DOM 中。

舉個例子：

 <template id="user-card">
  <div class="card">
    <h3>用戶名</h3>
    <p>用戶簡介</p>
  </div>
</template>

<script>
  const template = document.getElementById(&#39;user-card&#39;);
  const clone = template.content.cloneNode(true);
  document.body.appendChild(clone);
</script>

上面這段代碼會把模板中的內容克隆一份並插入頁面中。這樣，你就可以在多個地方重複使用這個卡片結構，只需要修改其中的文字內容即可。

如果你有多個不同的用戶數據，可以用循環來生成多個卡片。

結合數據動態填充內容

光有靜態內容還不夠，實際開發中往往需要根據數據動態生成內容。可以通過操作DOM 元素來實現這一點。

比如：

 <template id="product-item">
  <li class="product">
    <h4></h4>
    <p></p>
  </li>
</template>

<script>
  const template = document.getElementById(&#39;product-item&#39;);
  const products = [
    { name: &#39;手機&#39;, desc: &#39;最新款智能手機&#39; },
    { name: &#39;耳機&#39;, desc: &#39;無線降噪耳機&#39; }
  ];

  products.forEach(product => {
    const clone = template.content.cloneNode(true);
    clone.querySelector(&#39;h4&#39;).textContent = product.name;
    clone.querySelector(&#39;p&#39;).textContent = product.desc;
    document.querySelector(&#39;.product-list&#39;).appendChild(clone);
  });
</script>

這種方式非常適合構建列表類組件，如商品展示、文章列表等。

使用技巧與註意事項

• 模板內容不要直接操作：因為模板內容不在當前文檔流中，不能直接訪問其子元素，必須先克隆。
• 避免ID 衝突：模板裡如果有ID，多次使用會導致重複ID，建議改用class 或其他選擇方式。
• 樣式作用域：模板內的樣式只在插入後生效，注意全局樣式污染問題。
• 配合Web Components 使用更強大：結合Custom Elements 可以創建完全封裝的可複用組件。

基本上就這些。 <template></template>標籤雖然看起來簡單，但在組織和復用前端內容方面非常實用，特別是在沒有引入大型框架的情況下，它能幫你節省不少重複工作。

以上是使用HTML模板標籤使用可重複使用的內容片段的詳細內容。更多資訊請關注PHP中文網其他相關文章！