为什么 getElementsByClassName 不适用于动态创建的 HTML 元素？

Question

我正在创建多个动态 HTML 表，并为它们分配 class。 像这样：

 var x = document.createElement("TABLE");
 x.className = "table_pos_parts";
 //var row = x.insertRow(0);
 //var cell = row.insertCell(0);
 //var cell1 = row.insertCell(1);
 //cell.innerText = "abc";
 //cell1.innerText = 123;

 var x = document.createElement("TABLE");
 x.className = "table_pos_parts";
 //var row = x.insertRow(0);
 //var cell = row.insertCell(0);
 //var cell1 = row.insertCell(1);
 //cell.innerText = "def";
 //cell1.innerText = 456;

现在，当我使用console.log(x)时，我可以在控制台中看到所有表，但是当我开始按类名搜索它们时：

console.log(document.getElementsByClassName("table_pos_parts")); //shows empty
console.log(document.getElementsByClassName("table_pos_parts").length); //prints 0

它显示为空。 为什么？

Answer 1

使固定：

您没有将x添加到document.body ，要解决此问题，请使用document.body.append(x)然后在控制台中您会得到它。

改进：另外，您的 var x 使用了两次，这意味着 x 将记录附加的最后一个元素，如果稍后您想更改它，则不能。 要修复它，只需将第二个元素的变量名称更改为其他名称（但不能称为“x”）以及其他变量的名称，例如：cell、cell1 等。经过大量改进，我做了以下。

完整代码：

     var x = document.createElement("TABLE");
     x.className = "table_pos_parts";
     //var row1 = x.insertRow(0);
     //var cell1 = row1.insertCell(0);
     //var cell2 = row1.insertCell(1);
     //cell1.innerText = "abc";
     //cell2.innerText = 123;
     document.body.append(x) // add it to the document

     var y = document.createElement("TABLE");
     y.className = "table_pos_parts";
     //var row2 = y.insertRow(0);
     //var cell3 = row2.insertCell(0);
     //var cell4 = row2.insertCell(1);
     //cell3.innerText = "def";
     //cell4.innerText = 456;

     document.body.append(y) // add it to the document

您还可以使用document.body.insertBefore 、 document.body.insertAfter等将其附加到document.body 。

文档：链接

Answer 2

似乎您实际上还没有将新创建的元素附加到文档中