how can I dynamically insert data to html page from response array json?

Question

I am working on a Google search engine clone and have an array of results. I am running a for loop to enter the data into an HTML page, and I have numbered the IDs while incrementing them. While this solution works, it is not optimal. How can I dynamically insert data based on the number of results? I am using vanilla JavaScript.

<div class="inside">
  <a id="myLink5" href="https://www.example.com">Example Link</a>
  <h1 id="titleinput5"></h1>
  <div>

    <p id="mydes5"> </p>

  </div>

</div>

var input = document.getElementById("searchbartext");
var inputValue = input.value;
const url2 = 'https://api.bing.microsoft.com/v7.0/search?q=' + inputValue + '&count=50';

// totalEstimatedMatches

console.log(url2);
fetch(url2, options)
  .then(response => response.json())
  .then(data => {
    console.log(data);
    element.style.display = 'block';
    var number = 1;
    for (var i = 0; i < 7; i++) {
      const title = data.webPages.value[i].name;
      const organicUrl = data.webPages.value[i].url;
      const image = data.webPages.value[i].snippet;
      const totalEstimatedMatches = data.webPages.totalEstimatedMatches;
      document.getElementById("number_of_results").innerHTML = totalEstimatedMatches;
      document.getElementById("titleinput" + number).innerHTML = title;


      //    titleinput.textContent = ;
      document.getElementById("mydes" + number).innerHTML = image;
      document.getElementById("myLink" + number).href = organicUrl;
      document.getElementById("myLink" + number).innerHTML = organicUrl;
      number++;
    }
  })

Answer 1

Use document.createElement

Below i have used sample response data, you can use the logic inside your fetch method. Also follow the html structure

const container = document.getElementById('result');
const count = document.getElementById('count');
//api response data sample
const webPages ={
  totalEstimatedMatches:789456123,
  value:[
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    },
    {
      id:'https://example.com',
      name:'Example Website',
      url:'https://google.com',
      snippet:'Lorem iseuj something'
    }
  ]
}

//count use outside the loop

count.innerText = webPages.totalEstimatedMatches;

for (var i = 0; i < 7; i++) {
      const title = webPages.value[i].name;
      const organicUrl = webPages.value[i].url;
      const des = webPages.value[i].snippet;
      const totalEstimatedMatches = webPages.totalEstimatedMatches;
      let div = document.createElement('div');
      let a = document.createElement('a');
      let h1 = document.createElement('h1');
      let p = document.createElement('p');
      a.href = organicUrl;
      a.innerText = organicUrl;
      h1.innerText = title;
      p.innerText = des
      div.append(a,h1,p);
      
      container.append(div)

}

<section>
<span>Count</span><h5 id='count'></h5>
<main id='result' class='result'>
  
</main>
</section>