getElementById 在循环遍历 HTML 集合时尝试追加时抛出错误

Question

我试图附加一些动态创建的html。它在使用 getElementById 时引发错误。.audit-table-element 是 DOM 中具有该特定类的div。

<div class="audit-table-element"></div>

Javascript ：

var elems = document.getElementsByClassName('audit-table-element');
for(var i = 0; i < elems.length; i++) {
elems[i].getElementById("always-audit-table" + category.id + "")
.getElementsByTagName("tbody")[0]
.insertAdjacentHTML("beforeend", auditTableRow);
}

错误-TypeError: elems[i].getElementById is not a function

当我删除行getElementById("always-audit-table" + category.id + "(时，追加正在工作，但附加到错误的位置。所以我需要有那行才能将 HTML 附加到正确的位置

Answer 1

您可以使用querySelector而不是getElementById。您的代码应如下所示。

elems[i].querySelector("[id = always-audit-table" + category.id + "]")
.getElementsByTagName("tbody")[0]
.insertAdjacentHTML("beforeend", auditTableRow);

查询选择器 ：这些用于根据 ID 、类、类型、属性、属性值等选择 HTML 元素。

单击此处了解有关查询选择器的更多信息

Answer 2

我不知道你的代码是什么样子的，但我尝试在这里创建一个示例。 看看这个，你的疑虑就会被清除

var testRow = "<tr><td>Data 1</td><td>Data 2</td></tr>";
var ele = document.getElementsByClassName('test');
for(var i = 0; i < ele.length; i++){ debugger;
ele[i].querySelector("[id = id"+i+"]").getElementsByTagName("tbody")[0].insertAdjacentHTML("beforeend", testRow);
}

<div class='test'>
<div id='id0'>
<table><tbody></tbody></table>
</div>
</div>
<div class='test'>
<div id='id1'>
<table><tbody></tbody></table>
</div>
</div>