使用HTML和Bootstrap开发网页时动态内容无法显示求助

核心问题 #

代码中存在DOM属性拼写错误：content.innerHtml = str 里的 innerHtml 是错误写法，标准DOM属性为innerHTML（字母H需大写）。错误的属性名无法将拼接好的HTML内容插入到页面中，这就是卡片不显示的直接原因。

修正后的代码 #

let str = ""
for (let item of r.articles) {
  str = str + `
      <div class="card m-4" style="width: 18rem;">
  <img src="${item.urlToImage}" class="card-img-top" alt="Error">
  <div class="card-body">
    <h5 class="card-title">${item.title}</h5>
    <p class="card-text">${item.description}</p>
    <a href="${item.url}" class="btn btn-primary">Read More..</a>
  </div>
</div>
  `
}
console.log(str)
content.innerHTML = str // 修正拼写错误
}

额外排查点 #

• 确认content变量已正确获取到页面中的目标DOM元素（例如通过document.getElementById('content')或document.querySelector('.content')），避免因元素不存在导致内容无法插入。
• 检查r.articles是否为有效数组，若数组为空，也会导致没有卡片内容生成，可在循环前添加console.log(r.articles)验证数据完整性。

内容的提问来源于stack exchange，提问作者Yadnyesh-Dashpute