Javascript banner.innerHTML += "" not working

Question

I have a web page and I needed to add HTML elements in a loop. But it won't add the HTML elements.

My HTML Code

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>

But this is not working. Please help me to fix this

Answer 1

well document.getElementsByClassName returns an array-like object. so you should like this

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

Answer 2

you can try 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>";
}