Question

我正在尝试使用JavaScript向表中添加行。我创建了一个匿名函数iterate，它迭代id名称，并且工作正常。问题出在我班上的某个地方。

class CreateTable{
      constructor(text) {
    this.text = text
  }

  makeTableRow(){
    let self = this;
    let row = document.createElement('tr');
    for (let i = 0; i < 1; i++) {
      let el = document.createElement('td');
      el.setAttribute('id', iterate(i));
      row.appendChild(el);
    }
    let en = document.getElementById('id1');
    console.log(en);
    en.innerHTML = self.text;
    return row;
  }
}

我从已经有效的东西改编了这个类，并进行了一些调整。 en变量返回typeError:en is null，我无法弄明白。我想要做的是创建两个带有可调用id的空td元素，然后立即将文本添加到第一个元素。这里发生的实际问题是什么？

Answer 1

如果DOM 中没有指定ID 的元素，document.getElementById()函数将返回null。您在循环中创建的元素尚未添加到DOM中，它们也会附加到不在DOM中的tr（它只是从您的函数返回而没有附加到任何东西）。

只需在创建元素时直接添加所需文本：

makeTableRow(){ let self = this; let row = document.createElement('tr'); for (let i = 0; i < 1; i++) { let el = document.createElement('td'); el.setAttribute('id', iterate(i)); if (i === 0) // for first element el.innerHTML = self.text; // set the content row.appendChild(el); } return row; }

顺便提一下，你说你想要创建两个 td元素，但你的循环只运行一个迭代。如果您希望它运行两次，则for条件应为i < 2。

Answer 2

是null，因为没有识别＆＃34; id＆＃34;，这意味着您在id =＆＃34; id1＆＃34;之前编写脚本。

您需要在＆＃34; body＆＃34;

之前编写脚本

  .......
  <div id="id1">
  </div>
  .....
  <script>
  ....
  </script>
</body>

变量null，即使没有被调用

2 个答案: