`
I am working on a web project using HTML and Bootstrap, but my content is not displaying in the browser.Here is my code:

`

    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

  }

enter image description here

`When I open this file in my browser, the card is normal bootstrap card , and no content is displayed. I have verified the following:

The file is saved with a .html extension.
The file is being opened directly in the browser (Chrome, Firefox).
There are no errors in the browser console.

And if I log string then it will be display in The Console as Following:`

 <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.