如何多次制作一个HTML组件？

在 HTML 中，我们可以使用 <template> 标签来定义多次使用的组件模板。模板内包含我们所需的 HTML 和 JavaScript 代码，但在页面上并不会被渲染，直到我们调用它。

以下是一个示例，我们利用 <template> 创建了一个简单的组件模板，其中包含了一个按钮。在 JavaScript 中，我们使用 importNode 方法将模板的内容导入文档中，这样就可以在任意位置多次使用这个组件了。

// HTML
<template id="my-component">
  <button>Click me</button>
</template>

// JavaScript
const componentTemplate = document.querySelector('#my-component');

const component1 = document.importNode(componentTemplate.content, true);
document.body.appendChild(component1);

const component2 = document.importNode(componentTemplate.content, true);
document.body.appendChild(component2);

在上面的代码中，我们首先使用 querySelector 获取模板的引用，然后创建两个组件 component1 和 component2，并将它们添加到文档中。