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。您的代码应如下所示。 querySelector将返回数组，因此您需要获取索引为[0]的元素。

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

querySelector：这些用于根据其ID，类，类型，属性，属性值等选择HTML元素。>>

Click here to learn more about querySelector

Answer 2

我不知道您的代码看起来如何，但是我尝试在此处创建一个示例。看看这个，您的疑虑就会清除