Question

我担心这可能是一个愚蠢的问题，但我不知道我的问题是什么。

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

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

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);
}, ...

最后两个console.logs的结果相同，但DOM中的元素已更改。 table [0] [0]返回与document.getElementById("0-0")相同的内容。（element（）函数返回简单的html代码（效果很好））

Answer 1

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

这可能会破坏对已构造的DOM元素的引用并导致其他混乱。实际上，您要做的就是在结尾添加一个新元素。

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

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

1 个答案: