Javascript banner.innerHTML +=“<div class='blocks'></div>”不工作[重复]答案

【问题标题】：Javascript banner.innerHTML += "<div class='blocks'></div>" not working [duplicate]Javascript banner.innerHTML +=“<div class='blocks'></div>”不工作[重复]
【发布时间】：2021-04-29 01:50:42
【问题描述】：

我有一个网页，我需要循环添加 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>

但这不起作用。请帮我解决这个问题

【问题讨论】：

名称getElement*s中的线索（复数）

标签： javascript html loops iteration innerhtml

【解决方案1】：

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>";
    }

【讨论】：

虽然在很多方面都类似于数组，但getElementsByClassName 返回的值是一个活动节点列表，而不是一个数组。
是的，你是对的。它返回一个类似数组的对象。谢谢

【解决方案2】：

你可以试试 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>";
}

【讨论】：