以下是一个简单的 <template> 示例：
<template id="myTemplate">
<p>This is a template content.</p>
</template>
<script>
// 在JavaScript中使用template
const template = document.getElementById('myTemplate');
const clone = document.importNode(template.content, true);
document.body.appendChild(clone);
</script>
在这个例子中，<template> 元素包含了一个段落元素，表示模板内容。在JavaScript中，使用 document.importNode 可以将模板内容克隆并插入文档中。这样，模板内容不会在文档初始加载时呈现，只有在需要时通过JavaScript插入。
<template> 的一个主要用途是在不使用JavaScript框架的情况下，以更灵活的方式管理和生成动态内容。例如，可以通过JavaScript克隆模板并根据需要插入多个相似的元素。
<template id="userTemplate">
<div class="user">
<img class="avatar" src="" alt="User Avatar">
<p class="username"></p>
</div>
</template>
<script>
// 克隆模板并插入多个相似的元素
const userTemplate = document.getElementById('userTemplate');
const user1 = document.importNode(userTemplate.content, true);
user1.querySelector('.avatar').src = 'user1.jpg';
user1.querySelector('.username').textContent = 'User 1';
document.body.appendChild(user1);
const user2 = document.importNode(userTemplate.content, true);
user2.querySelector('.avatar').src = 'user2.jpg';
user2.querySelector('.username').textContent = 'User 2';
document.body.appendChild(user2);
</script>
在这个例子中，模板包含了一个用户信息的结构，通过克隆模板并设置不同的属性，可以生成多个相似的用户元素。
转载请注明出处：http://www.zyzy.cn/article/detail/3911/HTML