` 我正在使用 HTML 和 Bootstrap 开发一个 Web 项目，但我的内容未在浏览器中显示。这是我的代码：
`
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
}
`当我在浏览器中打开此文件时，该卡是普通的引导卡，并且没有显示任何内容。我已验证以下内容：
文件以 .html 扩展名保存。 该文件直接在浏览器（Chrome、Firefox）中打开。 浏览器控制台没有错误。
如果我记录字符串，那么它将在控制台中显示如下：`
<div class="card m-4" style="width: 18rem;">
<img src="https://ichef.bbci.co.uk/news/1024/branded_news/0aae/live/162c92f0-233a-11ef-94ce-2524c2e905df.jpg" class="card-img-top" alt="Error">
<div class="card-body">
<h5 class="card-title">Women better at sport during period, study suggests</h5>
<p class="card-text">It could explain why women playing contact sports appear injury prone between ovulation and menstruation.</p>
<a href="https://www.bbc.com/news/articles/cl446z20mvjo" class="btn btn-primary">Read More..</a>
</div>
</div>
Plese Help me To Fixed These Error !I have tried various approach like i have try it on Replit But same issue will be there.根据我的理解，你正在执行 HTML 文件中的所有代码。并且您在其中使用了 script 标签（？）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News Cards</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div id="content" class="d-flex flex-wrap">
<!-- Cards will be inserted here by JavaScript -->
</div>
<script>
// Example data
const r = {
articles: [
{
urlToImage: 'https://ichef.bbci.co.uk/news/1024/branded_news/0aae/live/162c92f0-233a-11ef-94ce-2524c2e905df.jpg',
title: 'Women better at sport during period, study suggests',
description: 'It could explain why women playing contact sports appear injury prone between ovulation and menstruation.',
url: 'https://www.bbc.com/news/articles/cl446z20mvjo'
},
{
urlToImage: 'https://ichef.bbci.co.uk/news/1024/branded_news/0aae/live/162c92f0-233a-11ef-94ce-2524c2e905df.jpg',
title: 'Women better at sport during period, study suggests',
description: 'It could explain why women playing contact sports appear injury prone between ovulation and menstruation.',
url: 'https://www.bbc.com/news/articles/cl446z20mvjo'
}
// Add more articles here
]
};
let str = "";
for (let item of r.articles) {
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);
document.getElementById('content').innerHTML = str;
</script>
</body>
</html>这里我添加了一个 div 并为其指定了名称内容的 id，然后我使用 getElementById 方法来显示所有内容。让我知道这是否是您正在寻找的