动态创建元素时取消显示Javascript事件处理程序

给定下面的最小代码示例，我希望每个表行中的每个动态创建的按钮都会基于关联的onclick事件处理程序生成警报

A类{
构造函数（）{
var root=document.getElementById（'root'）；
root.innerHTML=
`
+
`
document.getElementById（'btn-add'）。onclick=（）=>{
这个。添加（）
}
此计数器=0
}
添加（）{
var tbl=document.getElementById（'tbl'）.innerHTML+=
`

-

`
document.getElementById（this.counter+'-btn rmv'）。onclick=（）=>{
警报（'单击事件！'）
}问题是

var tbl = document.getElementById('tbl').innerHTML +=
`
<li>
<button id="${this.counter}-btn-rmv">-</button>
</li>
`

容器元素基本上被清除，然后浏览器根据带有
+=
的新连接字符串重新解析其内容。文档中不再存在旧元素，因此无法触发附加到旧元素的侦听器（除最后一个按钮外，单击任何
-
按钮都将无效）

改用
insertAdjacentHTML
，这样不会损坏现有元素：


A类{
构造函数（）{
var root=document.getElementById（'root'）；
root.innerHTML=
`
+
`
document.getElementById（'btn-add'）。onclick=（）=>{
这个。添加（）
}
此计数器=0
}
添加（）{
document.getElementById（'tbl'）。insertAdjacentHTML（'beforeend'`

-

`);
document.getElementById（this.counter+'-btn rmv'）。onclick=（）=>{
警报（'单击事件！'）
}//html元素上的ID必须是唯一的。如果此代码用于创建同一html的多个实例，那么您将有多个ID相同的元素，这可能会导致此问题。脚本元素必须位于头部或正文中，而不是正文外。浏览器将自动更正，并将脚本元素放入正文中。
 
是无效的HTML，浏览器会自动更正，但会猜测将结束div标记放在何处。不是这样，但如果在单击时检查dom，每次都会看到元素清除并被替换
const existingHTML = document.getElementById('tbl').innerHTML;
document.getElementById('tbl').innerHTML = '';
document.getElementById('tbl').innerHTML = existingHTML + ...