如何在javascript中克隆元素并附加唯一的新子节点

我制作了克隆功能和文本计数器，它应该在我克隆的每个新框中附加一个新数字，我的代码在下面克隆元素，但新元素总是指来自第一个源的数字，而且计数器总是在第一个框中写入新数字，第一个框总是将数字从1写到最新的计数器编号。是否可以只使用javascript来完成？我真的很感谢你的帮助

var container=document.querySelector.container； var deleteBtn=document.querySelector.delete； var-box=document.querySelector.box； var计数器=0； container.addEventListener'click'，函数{target}{ 如果target.nodeName='BUTTON'&&target.classList.contains'cloneBtn'{ 计数器++； var text=document.createTextNodecounter； box.appendChildtext； const clone=target.parentNode.cloneNodetrue； container.appendChildclone； } iftarget.nodeName='BUTTON'&&target.classList.contains'deleteBtn'{ target.parentNode.removetarget } } .集装箱{ 边框：1px纯黑； 填充：10px； 显示器：flex； 柔性包装：包装； } .盒子{ 宽度：100px； 高度：100px； 背景：红色； 利润率：10px； } 克隆 删去

---

如果我理解正确，问题是您总是将计数器值附加到初始的.box元素，您希望将其附加到克隆的元素，因此您将在克隆的元素中看到新的计数器值：

var container=document.querySelector.container； var deleteBtn=document.querySelector.delete； var-box=document.querySelector.box； var计数器=0； container.addEventListener'click'，函数{target}{ 如果target.nodeName='BUTTON'&&target.classList.contains'cloneBtn'{ 计数器++； var text=document.createTextNodecounter；

---

//box.appendChildtext；代码中有很多逻辑错误：在克隆之前追加文本，这就是显示的序列错误的原因。此外，您选择了“按类”，但所有克隆的框都将具有相同的类，结果是一团乱。 我建议使用ID，并将计数器附加到新创建/克隆元素的ID上。最后，使用delegate将同一事件挂接到多个元素上