I wanted to change the value of attachment in the table to a clickable link because the links are very long, i got the link from Firebase firestore and i wanted to change it to a clickable link

this is the JavaScript file

var attendantNumber = 0;
var tbody = document.getElementById('tbody1');

function AddItemToTable(fname, lname, email, phoneNumber, country, attachment){

    let trow = document.createElement('tr');
    let td1 = document.createElement('td');
    let td2 = document.createElement('td');
    let td3 = document.createElement('td');
    let td4 = document.createElement('td');
    let td5 = document.createElement('td');
    let td6 = document.createElement('td');
    let td7 = document.createElement('td');

    td1.innerHTML = ++attendantNumber;
    td2.innerHTML = fname;
    td3.innerHTML = lname;
    td4.innerHTML = email;
    td5.innerHTML = phoneNumber;
    td6.innerHTML = country;
    td7.innerHTML = attachment;

    trow.appendChild(td1);
    trow.appendChild(td2);
    trow.appendChild(td3);
    trow.appendChild(td4);
    trow.appendChild(td5);
    trow.appendChild(td6);
    trow.appendChild(td7);
    tbody.appendChild(trow);
}

function AddAllItemsToTable(TheAttendant) {
    attendantNumber = 0;
    tbody.innerHTML = "";
    TheAttendant.forEach(element => {
        AddItemToTable(element.FirstName, element.LastName, element.Email, element.PhoneNumber, element.Country, element.attachment);
    });  
}


async function GetAllData() {
    const querySnapshot = await getDocs(collection(db, "attendants"));
    var attendants = [];
    querySnapshot.forEach(doc => {
        attendants.push(doc.data());
    });

    AddAllItemsToTable(attendants);
}

window.onload = GetAllData;