Solo estoy aprendiendo javascript, estoy usando HTML DOM InnerHTML para mostrar una lista de datos que creé y mi código se basa en OOP.

Cuando está en la página, se ve bien. Pero cuando me muevo a otra página, el error aparece así.

¿Cómo puedo deshacerme del error? Quiero mostrar una lista de datos con HTML interno en otra página, pero no puedo debido a este error. Este es mi código:

 let listCattle = []; let nCattle = CattleDummy.length; for (let i=0; i<nCattle; i++){ s = CattleDummy[i]; listCattle[i] = new Cattle(); listCattle[i].addCattle(s._id, s.gender, s.cowType, s.age, s.weight, s.deseaseHistory, s.dateofDesease); } tableCattle(listCattle); function tableCattle(data){ let table = document.getElementById('CattleTable') for(let i=0; i<data.length; i++){ let row = `<tr> <td>${data[i].getId()}</td> <td>${data[i].getGender()}</td> <td>${data[i].getSpecies()}</td> <td>${data[i].getAge()}</td> <td>${data[i].getWeight()}</td> <td>${data[i].getDeseaseHist()}</td> <td>${data[i].getHealthy()}</td> <td>${data[i].getCondition()}</td> </tr>` table.innerHTML += row } }

Este es el código en la página de seguimiento:

 <div class="container" style="margin-top: 30px;"> <table class="table"> <thead> <tr> <td>ID</td> <td>Gender</td> <td>Species</td> <td>Age</td> <td>Weight</td> <td>Desease History</td> <td>Healthy</td> <td>Condition</td> </tr> </thead> <tbody class="table-group-divider" id="CattleTable"> </tbody> </table> </div>

Editar: sé que el problema es que me mudé a otra página donde la identificación de 'CattleTable' no existe. Entonces, ¿cómo puedo crear otra tabla en otra página sin mostrar CattleTable con innerHTML si el error sigue ahí?