在JavaScript数组中存储DOM元素引用。为什么我不能重用存储的引用来添加eventListener？

恐怕这可能是个愚蠢的问题，但我不知道我的问题出在哪里了

我动态创建按钮（每个按钮都有唯一的id），并将每个btn引用（document.getElementById（））存储在简单的二维数组中。所有这些都是因为我需要将BTN保持在组织良好的结构中

---

问题是：当我试图通过引用修改之前存储在数组中的元素时，ref和html元素之间似乎没有连接

---

var表={
尺寸：10，
表：[]，
generateTable:function（）{
var i=0，
j=0，
id=null，
tablePlaceholder=document.getElementById（“tableHTML”）；
//生成表
对于（i=0；i”；
}
console.log（this.table[0][0].className）；
document.getElementById（“0-0”）.className+=“btn成功”；
console.log（this.table[0][0].className）；
}, ...

---

最后两个console.logs的结果相同，但DOM中的元素已更改。 表[0][0]返回的内容与

document.getElementById（“0-0”）

相同。

---

（element（）函数返回简单的html代码（它工作得很好））

我刚刚读了一篇关于“为什么不使用innerHTML”的文章，天哪，我再也不会使用它了。将innerHTML更改为创建和添加单独的节点解决了我的问题。谢谢你的回答！

var Table = {
size: 10,
table: [],
generateTable: function() {
  var i = 0,
    j = 0,
    id = null,
    tablePlaceholder = document.getElementById("tableHTML");

  //Generate table
  for (i = 0; i < this.size; i++) {
    this.table.push([]);
    for (j = 0; j < this.size; j++) {
      id = i.toString() + "-" + j.toString();
      tablePlaceholder.innerHTML += element(id);
      this.table[i].push(document.getElementById(id));
    }
    tablePlaceholder.innerHTML += "</br>";
  }



  console.log(this.table[0][0].className);
  document.getElementById("0-0").className += " btn-success";
  console.log(this.table[0][0].className);
}, ...

innerHTML += '<div>...</div>';

var elem = document.createElement('div');
elem.id = id;
tablePlaceholder.appendChild(elem);​​​​​​​​​​​​​​​​