js如何渲染数组每一项并带标签 class

在JavaScript中，如果你想为数组中的每一项添加一个自定义标签，并同时设置该标签的CSS类，你可以结合模板字符串或数组映射方法（如`.map()`）来实现。这里有一个简单的示例：

假设我们有这样一个数组 `items` 和一个 HTML 结构模板 `template` 包含一个带有 `customClass` 类的标签：

const items = ['item1', 'item2', 'item3'];
const template = '<div class="customClass"><span>{item}</span></div>';

// 使用 map() 方法遍历数组并将结果插入到模板中
const renderedItems = items.map((item, index) => {
  return template.replace('{item}', item);
});

// 然后将渲染后的 HTML 插入到文档中
document.body.innerHTML = renderedItems.join('');

上述代码会在文档中创建三个带有 `.customClass` 的 `div` 标签，每个 `div` 中包含一个相应的数组项目。

如果要在 `span` 上添加自定义类，只需要稍微修改模板即可：

const template = '<div class="customClass"><span class="customSpan">{item}</span></div>';

现在，`customSpan` 类会被应用到每个项目的 `span` 元素上。