Изменение таблицы в DOM

Есть таблиц, которая генерируется из файла .txt

<table class="table_top">
    <thead>...</thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>текст который нужно изменить на ссылку с этим текстом</td>
            ...
        </tr>
...

Это код для вывода данных из файла .txt

const INPUT = document.addEventListener('DOMContentLoaded', function(event) {
  fetch('/message.txt')
    .then(function(response) {
      if (response.ok) {
        return response.text();
      }
      throw new Error('Не удалось загрузить файл.');
    }).then(function(text) {
      renderTable(text);
    })
    .catch(function(error) {
      console.error('Произошла ошибка при попытке отобразить файл: ' + error.message);
    });
});

И код который изменяет текст в таблице на ссылку с этим же текстом, но код не работает, так как таблицы по факту на странице нет.

(function() {    
    // сбор переменных
    // вы можете изменить это, чтобы изменить, какой элемент вы заменяете
    var reference = document.querySelector('.table_top td:nth-child(2)');
    var text = reference.innerText;
    var replacement = text.replace(reference, "www.site.com/q?=" + reference);
    // создать новый тег привязки
    var a = document.createElement('a');
    a.href = replacement;
    a.innerText = text;
    // произведите замену
    reference.innerHTML = ''; // очистите старое содержимое ссылки
    reference.appendChild(a); // добавьте новый тег привязки к элементу
}); 

Помогите настроить