使用

If you're looking to reuse chunks of HTML without repeating code, the <template></template> tag is a simple but powerful tool. It lets you define inert HTML content that can be cloned and inserted into your document when needed. This is especially useful for components or sections that appear multiple times across a site.

What the Template Tag Does

The <template></template> tag holds HTML content that isn't rendered on page load. The browser parses it, but doesn't display it or load any associated resources like images or scripts inside it — at least not until you activate it with JavaScript.

This makes it perfect for storing bits of markup you want to use later, like form elements, list items, or UI components. You can define them once and clone them as needed, keeping your HTML clean and organized.

Here's what a basic template looks like:

 <template id="user-card">
  <div class="card">
    <h3>User Name</h3>
    <p>Email: user@example.com</p>
  </div>
</template>

Nothing shows up on the page, but this block is ready to be pulled in using JavaScript whenever you need to display a user card.

How to Use a Template in JavaScript

To bring a template to life, all you need is a bit of JavaScript. Here's how to grab the template content and insert it into the DOM.

• Start by selecting the template element.
• Clone its contents using document.importNode() .
• Append the clone to your desired location in the DOM.

For example:

 const template = document.getElementById('user-card');
const clone = document.importNode(template.content, true);
document.body.appendChild(clone);

This inserts a copy of the template content into the body. You can do this multiple times, each time inserting a fresh copy.

You can also customize the content before inserting it. For instance, if you're looping through user data:

 users.forEach(user => {
  const clone = document.importNode(template.content, true);
  clone.querySelector('h3').textContent = user.name;
  clone.querySelector('p').textContent = `Email: ${user.email}`;
  document.getElementById('user-list').appendChild(clone);
});

This way, you avoid writing repetitive HTML and keep your logic neat.

When to Use Templates Instead of Other Methods

Templates are best used when you have static HTML structures that don't change often but need to be reused. They're lighter than full-blown component frameworks and don't require external libraries.

They work well for:

• Repeating items like cards or list entries
• Modal windows or dropdown menus that appear conditionally
• Sections that are swapped out dynamically based on user input

Other approaches like server-side includes or JavaScript frameworks (React, Vue) might be better for larger applications or dynamic content that needs two-way binding or state management.

But for small-scale reuse, templates are a solid choice — no build tools required.

A Few Things to Keep in Mind

There are a few quirks worth noting:

• Scripts inside a template won't run until the content is added to the DOM.
• Styles inside a template only apply once the content is inserted.
• If you're cloning multiple times, make sure IDs are unique or remove them altogether.

Also, since browsers treat templates as inert, any images or media inside won't start loading until they're part of the live DOM. That can be good for performance, but may affect timing if you're relying on assets being preloaded.

基本上就這些。模板標籤簡單但容易忽略，尤其適合需要多次插入相同結(jié)構(gòu)但內(nèi)容略有不同的場景。

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