Create web page using JavaScript with a different web address

I have created a custom element using JavaScript. This custom element has been added to my HTML page. When the user clicks on this element, the user should be directed to a new page. This page should be created dynamically using JavaScript.

I understand how to create this page by clearing the current page and adding the new elements. However, I want to change the web address and redirect the user to a brand new page.

I have created an Array of Objects. I want to write a single block of code and from this block, create a separate page for each object in the Array of Objects.

For example:

const myArray = [{object: "First Object",},{"Second Object"},{"Third Object"},{"Fourth Object"},{"Fifth Object"}];
const customElements = window.customElements;

class MyElement extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = `<a href="page2.html">${myArray.object}</a>`;
    }}
customElements.define("header-element",MyElement);

In this example, I have written some JavaScript code. For each object in myArray, a link is created which shows the value of object currently being iterated through. However, the link is always page2.html, which I have created manually.

Instead of creating each link manually, I want the JavaScript program to create each page. I understand I can do this by clearing the current page using CSS and adding the new elements. However, this will mean the page will not change and only the content of the page.

I want the JavaScript program to create a page dynamically for each object in myArray with a different path.

I have found this question which is similar but regarding how to do this with a page using PHP: dynamically create HTML page from Javascript