<template> 標籤：簡化 JS 的核心 HTML 功能

我目前正在開發一款對話式人工智慧 Web 應用。我完全從零開始建造它，遵循結構化的 SDLC 方法。

目前，我正處於第 3 階段：前端交互，我正在致力於動態呈現聊天訊息。

最初，我採用了一種常見的方法：使用insertAdjacentHTML()將使用者和 AI 訊息氣泡直接加入到 DOM 中。這種方法雖然有效，但我的 JavaScript 檔案卻變得混亂，充斥著大量重複的 HTML 程式碼。

它看起來是這樣的。

⛔ 問題：JavaScript 中 HTML 過多

<div id="messages-container"></div>

const messagesContainer = document.getElementById('messages-container');
const messageHTML = `
  <div class="flex justify-start mb-4 animate-slide-in">
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg px-4 py-2 max-w-[70%]">
      <p class="text-gray-800 dark:text-gray-200">${text}</p>
    </div>
  </div>
`;
messagesContainer.insertAdjacentHTML('beforeend', messageHTML);

這對於單一訊息類型來說效果很好，但是一旦我需要處理 AI 訊息（具有不同的佈局），我意識到我在多個地方重複了相同的結構。

它缺乏簡單性，也不具備可擴展性。

我需要一種更易於維護的方法來區分邏輯（JS）和結構（HTML）。

那時，我發現了<template>標籤，一個原生功能。

✅ 解決方案： `<template>`標籤

它允許您定義可重複使用的 HTML 部分，這些部分保持非活動狀態，直到您有意使用 JavaScript 來呈現它們。

簡單來說：

瀏覽器解析裡面的 HTML ，但不顯示。
每當您需要動態呈現它時，都可以使用template.content.cloneNode(true)透過 JS 複製其內容。

透過這樣做，您可以建立清晰的聲明性 HTML，然後在腳本中使用它，而不會用原始 HTML 字串弄亂您的 JS 檔案。

這是結構。

<template id="user-message-template">
  <div class="flex justify-start mb-4 animate-slide-in">
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg px-4 py-2 max-w-[70%]">
      <p class="text-gray-800 dark:text-gray-200 message-text"></p>
    </div>
  </div>
</template>

<div id="messages-container"></div>

🛠️ 工作原理

當瀏覽器遇到，它解析標記但不呈現它。

這意味著：

裡面的內容不會出現在 DOM 中。
其中的腳本或映像將無法執行或載入。
它靜靜地等待著被複製的時機。

要使用它，請透過 JavaScript 擷取模板的內容來複製它：

const messagesContainer = document.getElementById('messages-container');
const userTemplate = document.getElementById('user-message-template');

function addUserMessage(text) {
  // Clone the content of the template
  const messageClone = userTemplate.content.cloneNode(true);

  // Modify the cloned node
  messageClone.querySelector('.message-text').textContent = text;

  // Append it to the container
  messagesContainer.appendChild(messageClone);
}

// Example usage
const btn = document.getElementById('sendBtn');
btn.addEventListener('click', function () {
     addUserMessage('This is test user message');
});

您的 HTML 現在是可擴展的、可讀的和模組化的。

如果我稍後決定加入 AI 訊息，我的 JavaScript 程式碼中不會出現任何混亂的 HTML 重複。我只需定義一個樣式略有不同的模板即可。