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

什麼是<template></template>標(biāo)籤？

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

它的特點(diǎn)是：

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

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

如何使用<template></template>創(chuàng)建可複用內(nèi)容？

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

舉個(gè)例子：

 <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>

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

如果你有多個(gè)不同的用戶數(shù)據(jù)，可以用循環(huán)來生成多個(gè)卡片。

結(jié)合數(shù)據(jù)動(dòng)態(tài)填充內(nèi)容

光有靜態(tài)內(nèi)容還不夠，實(shí)際開發(fā)中往往需要根據(jù)數(shù)據(jù)動(dòng)態(tài)生成內(nèi)容?？梢酝ㄟ^操作DOM 元素來實(shí)現(xiàn)這一點(diǎn)。

比如：

 <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;手機(jī)&#39;, desc: &#39;最新款智能手機(jī)&#39; },
    { name: &#39;耳機(jī)&#39;, desc: &#39;無線降噪耳機(jī)&#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>

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

使用技巧與註意事項(xiàng)

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

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

以上是使用HTML模板標(biāo)籤使用可重複使用的內(nèi)容片段的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！