Javascript banner.innerHTML += "<div class='blocks'></div>" 不起作用

如何解决Javascript banner.innerHTML += "<div class='blocks'></div>" 不起作用

我有一个网页，我需要在循环中添加 HTML 元素。但它不会添加 HTML 元素。

我的 HTML 代码

const banner = document.getElementsByClassName('banner');
const blocks = document.getElementsByClassName('blocks');

for(var i=1; i < 4; i++){
  banner.innerHTML += "<div class='blocks'></div>";
}

<section>
  <h2>Coming Soon</h2>
  <div class="banner">
    <div class="blocks"></div>
  </div>
</section>

但这行不通。请帮我解决这个问题

解决方法

well document.getElementsByClassName 返回一个类似数组的对象。 所以你应该喜欢这个

    const banner = document.getElementsByClassName('banner');
    const blocks = document.getElementsByClassName('blocks');
    
    for(var i=1; i < 4; i++){
      banner[0].innerHTML += "<div class='blocks'></div>";
    }

,

你可以试试 API document.querySelector(selector)

const banner = document.querySelector('.banner');
const blocks = document.getElementsByClassName('blocks');

for(var i=1; i < 4; i++){
  banner.innerHTML += "<div class='blocks'></div>";
}