標簽用于定義可重復使用的 html 代碼片段，不會被直接渲染，而是等待 JavaScript 克隆并插入 dom 后才顯示。1. 它具有惰性渲染特性，有助于動態生成內容、創建組件和優化性能；2. 使用時通過 template.content.clonenode(true) 克隆內容，并插入到指定容器中；3. 可結合數據動態填充，如通過 queryselector 設置文本內容；4. 事件監聽器需在克隆后添加到具體元素上；5. 與 <script> 標簽的<a style="color:#f60; text-decoration:underline;" title= "區別"href="https://www.php.cn/zt/27988.html" target="_blank">區別在于用途不同，<template> 存儲 html 片段，而 <script> 包含 javascript 代碼；6. 對 SEO 無直接影響，搜索引擎無法看到未通過 JS 插入 dom 的模板內容，建議結合 ssr 或預渲染技術提升可索引性。</script>
template 標簽允許你定義可重復使用的 HTML 代碼片段，它本身不會被渲染到頁面上，而是作為模板存在，等待 JavaScript 來填充和使用。這對于動態生成內容、創建自定義組件或者優化性能都非常有用。
解決方案
template 標簽的核心價值在于它的惰性渲染特性。瀏覽器會解析 template 標簽內的 HTML，但不會直接渲染它。只有當你使用 JavaScript 克隆并將其插入到 DOM 中時，內容才會顯示出來。
基本用法：
立即學習“前端免費學習筆記（深入）”；
<template id="my-template"> <p>這是一個模板內容。</p> <button>點擊我</button> </template> <div id="container"></div> <script> const template = document.getElementById('my-template'); const container = document.getElementById('container'); // 克隆模板內容 const clone = template.content.cloneNode(true); // 將克隆的內容添加到容器中 container.appendChild(clone); </script>
這段代碼首先定義了一個 template 標簽，其中包含一個段落和一個按鈕。然后，通過 JavaScript 獲取該模板，克隆其內容，并將其添加到 container 元素中。template.content 屬性包含了模板的文檔片段，cloneNode(true) 方法進行深度克隆，確保所有子元素也被復制。
更復雜的示例：
假設你需要根據 json 數據動態生成列表項。
<template id="list-item-template"> <li> <span class="item-name"></span> <span class="item-price"></span> </li> </template> <ul id="item-list"></ul> <script> const items = [ { name: '蘋果', price: 2.5 }, { name: '香蕉', price: 1.8 }, { name: '橙子', price: 3.2 } ]; const template = document.getElementById('list-item-template'); const itemList = document.getElementById('item-list'); items.forEach(item => { const clone = template.content.cloneNode(true); clone.querySelector('.item-name').textContent = item.name; clone.querySelector('.item-price').textContent = item.price; itemList.appendChild(clone); }); </script>
這個例子展示了如何使用 template 標簽結合 JavaScript 動態填充數據。querySelector 方法用于選擇模板中的元素，并使用 textContent 屬性設置其內容。
如何在 template 中使用事件監聽器？
直接在 template 標簽內部添加事件監聽器可能不會像預期那樣工作，因為模板的內容在被克隆并添加到 DOM 之前是不會激活的。正確的做法是在克隆模板后，再為克隆的元素添加事件監聽器。
<template id="button-template"> <button>點擊我</button> </template> <div id="event-container"></div> <script> const template = document.getElementById('button-template'); const container = document.getElementById('event-container'); const clone = template.content.cloneNode(true); const button = clone.querySelector('button'); button.addEventListener('click', () => { alert('按鈕被點擊了！'); }); container.appendChild(clone); </script>
在這個例子中，首先克隆了模板的內容，然后通過 querySelector 獲取按鈕元素，并為其添加了一個點擊事件監聽器。這樣，當按鈕被添加到 DOM 并被點擊時，事件監聽器就會被觸發。
template 和 script 標簽的區別是什么，何時使用哪個？
template 和 script 標簽都允許你在 HTML 中包含不立即執行的內容，但它們的目的和行為有所不同。
-
template 標簽用于存儲 HTML 片段，這些片段可以被 JavaScript 克隆并添加到 DOM 中。瀏覽器會解析 template 標簽內的 HTML，但不會渲染它，直到它被添加到 DOM 中。
-
script 標簽用于包含 JavaScript 代碼。瀏覽器會立即解析并執行 script 標簽內的代碼（除非使用了 type=”module” 或 defer” 屬性）。
選擇哪個標簽取決于你的需求。如果你需要存儲 HTML 片段以便稍后使用 JavaScript 動態生成內容，那么 template 標簽是更好的選擇。如果你需要包含 JavaScript 代碼，那么 script 標簽是必要的。
例如，如果你想定義一個可重復使用的 HTML 表單，你可以使用 template 標簽。如果你想編寫 JavaScript 代碼來處理表單的提交事件，你需要使用 script 標簽。
template 標簽對 SEO 有什么影響？
template 標簽本身對 SEO 沒有直接影響。搜索引擎爬蟲不會執行 JavaScript 代碼，因此它們不會看到 template 標簽的內容，除非這些內容被 JavaScript 添加到 DOM 中。
如果你的網站大量使用 JavaScript 來生成內容，并且這些內容對 SEO 很重要，那么你需要確保搜索引擎爬蟲能夠正確地索引這些內容。你可以使用服務器端渲染（SSR）或預渲染等技術來解決這個問題。這些技術允許你在服務器端生成 HTML 內容，并將其發送給客戶端。這樣，搜索引擎爬蟲就可以直接看到 HTML 內容，而無需執行 JavaScript 代碼。
另外，請記住，良好的網站結構、清晰的內容和高質量的鏈接仍然是 SEO 的關鍵因素。即使你使用了 template 標簽來動態生成內容，你也應該關注這些因素，以確保你的網站在搜索引擎中獲得良好的排名。
