Javascript 将类分配给动态创建的div

我有一些代码根据后端中的元素数量创建一定数量的div。我正在尝试为每个div动态创建新类

目前我有：

<div class="cat-box">Title</div>
<div class="cat-box">Title</div>
// these divs are created with JavaScript

标题
标题
//这些div是用JavaScript创建的

我希望他们成为：

<div class="cat-box cat-num-0">Title</div>
<div class="cat-box cat-num-1">Title</div>

标题
标题

我在上找到了一些代码，以便在中实现，但我认为动态创建原始div而不是将其硬编码到我的HTML中会有一个复杂性

有什么想法吗

JS代码段：

loadCategories（）{
设categs=_类；
让htmlElems=“”；
对于（变量i=0；i

只需切换：

htmlElems += "<div class='cat-box'>" + categs[0].Title + "</div>";`

htmlems+=“”+categs[0]。Title+“”`

致：

//或：cat num-“+（i+1）+”
htmlElems+=“”+categs[0]。标题+“”；

然后卸下

$（“.cat box”）。每个（…）

循环。

只需切换：

htmlElems += "<div class='cat-box'>" + categs[0].Title + "</div>";`

htmlems+=“”+categs[0]。Title+“”`

致：

//或：cat num-“+（i+1）+”
htmlElems+=“”+categs[0]。标题+“”；

---

然后删除

$（“.cat box”）。每个（…）

循环。

DOM的核心功能之一是，您可以通过编程方式创建节点，而不是连接HTML字符串

let categories=[{title:'Foo'}，{title:'Bar'}，{title:'Baz'}]；
设frag=document.createDocumentFragment（）；
类别。forEach（功能（类别，i）{
设div=document.createElement（'div'）；
div.innerHTML=cat['title']；
div.className=“猫箱猫数-”+（i+1）；
儿童福利机构（分部）；
});
文件。查询选择器（“顶级培训部门”）。附录（frag）
DOM的一个核心特性是，您可以通过编程方式创建节点，而不是连接HTML字符串


let categories=[{title:'Foo'}，{title:'Bar'}，{title:'Baz'}]；
设frag=document.createDocumentFragment（）；
类别。forEach（功能（类别，i）{
设div=document.createElement（'div'）；
div.innerHTML=cat['title']；
div.className=“猫箱猫数-”+（i+1）；
儿童福利机构（分部）；
});
文件。查询选择器（“顶级培训部门”）。附录（frag）
简单明了。谢谢把
。每一个
都放在里面感觉很奇怪。简单明了。谢谢把
。每个
都放在里面感觉很奇怪。
// or: cat-num-" + (i + 1) + "
htmlElems += "<div class='cat-box cat-num-" + i + "'>" + categs[0].Title + "</div>";