There's a lot of way , this is one of them.

In this example we have a querySelector which gets the element with class name data so the HTML code can be inserted in this place.

The map() method is used to call the provided function once for each element in an array, in order, so the table with all the data of the array can be created.

I hope be useful for you.

const dataElement = document.querySelector('.data');

const data = [
  {fullName: 'Nathan', age: 21, jobTitle: 'Programmer', location: 'IRAN'},
  {fullName: 'Ali', age: 21, jobTitle: 'Programmer', location: 'UK'},
  {fullName: 'Ariana', age: 21, jobTitle: 'Programmer', location: 'US'},
];

data.map(item => {
  dataElement.insertAdjacentHTML('afterbegin', `
      <div class="cell" data-title="Full Name">
          ${item.fullName}
      </div>
      <div class="cell" data-title="Age">
          ${item.age}
      </div>
      <div class="cell" data-title="Job Title">
          ${item.jobTitle}
      </div>
      <div class="cell" data-title="Location">
          ${item.location}
      </div>
`)
})

<div class="limiter">
        <div class="container-table100">
            <div class="wrap-table100">
                    <div class="table">

                        <div class="row header">
                            <div class="cell">
                                Rank
                            </div>
                            <div class="cell">
                                Name
                            </div>
                            <div class="cell">
                                Quiz Name
                            </div>
                            <div class="cell">
                                Scores
                            </div>
                        </div>
//repeat below code
                        <div class="row data">
                        </div>
//till here
                    </div>
            </div>
        </div>
    </div>

Convert that element to string, loop through the given array, insert using insertAdjacentHTML.

const names = ['amit', 'mayank', 'jatin'];

const tableBody = names
  .map((name) => `
    <div class="row">
      <div class="cell" data-title="Full Name">1</div>
      <div class="cell" data-title="Age">${name}</div>
      <div class="cell" data-title="Job Title">Python Quiz</div>
      <div class="cell" data-title="Location">100</div>
    </div>`).join('');

const rowHeader = document.querySelector('.table > .header');

rowHeader.insertAdjacentHTML('afterend', tableBody);

You can create an array of objects, iterate through it to create a string with HTML which you will append into your HTML, and then append it.

const tableEl = document.querySelector('.table');
let htmlToAppend = "";
let data = [
    {
        name: 'John Doe',
        age: 20,
        job: 'Cashier',
        location: 'London'
    },
    {
        name: 'Jane Doe',
        age: 30,
        job: 'Taxi driver',
        location: 'New York'
    },
    {
        name: 'Bill Gates',
        age: 65,
        job: 'Entertainer',
        location: 'Moldovia'
    },
    {
        name: 'Donald Darko',
        age: 19,
        job: 'Student',
        location: 'Middlesex'
    },
    ];

data.forEach(entry => {
       htmlToAppend += `<div class="row">
                            <div class="cell" data-title="Full Name">
                                ${entry.name}
                            </div>
                            <div class="cell" data-title="Age">
                                ${entry.age}
                            </div>
                            <div class="cell" data-title="Job Title">
                                ${entry.job}
                            </div>
                            <div class="cell" data-title="Location">
                                ${entry.location}
                            </div>
                        </div>`
})

tableEl.innerHTML = htmlToAppend;