如何选择动态javascript dom元素答案

【问题标题】：How to select dynamic javascript dom element如何选择动态javascript dom元素
【发布时间】：2021-03-20 15:32:24
【问题描述】：

我创建了一个 javascript 脚本来创建几个 div。现在我想再次使用 javascript，但我无法做到。

 data.map((_r) => {
    classesList.innerHTML += `
    <div class="class" name=${_r.name} >
          <div class="top">
            <h1>${_r.name}</h1>
            <i class="fas fa-arrow-down"></i>
          </div>
          <div class="bottom">
            <p>${_r.count}</p>
          </div>
        </div>
    `;
  });

使用document.querySelectorAll(".class") 获取插入的元素返回一个空的NodeList

【问题讨论】：

“classesList”是否附加到 document.body 中？
什么时候运行 querySelectorAll()？当你运行它时，可能元素没有加载到 DOM 中。
你检查divs 被添加了吗？我做了一个测试，你的 querySelectorAll 是正确的。
#KNVB的classesList附加到另一个div而不是body
是的 #Rarex，它们还没有加载到 dom 中。但是使用 DOMNodeLoaded 事件会触发很多次而不是我想要的

标签： javascript html arrays loops dom

【解决方案1】：

data = [{ name:'Steve',count:10 },{name:'Everst',count:1}];
let html='';
data.map((_r) => {
  html += `
  <div class="class" name=${_r.name} >
      <div class="top">
          <h1>${_r.name}</h1>
          <i class="fas fa-arrow-down"></i>
      </div>
      <div class="bottom">
          <p>${_r.count}</p>
      </div>
  </div>
  `;
});
document.body.innerHTML=html;
let divs = document.querySelectorAll(".class");
console.log(divs)

【讨论】：